<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>前端+后端知识汇总（2） | 晚夜微雨问海棠のBlog</title><meta name="keywords" content="知识"><meta name="author" content="晚夜微雨问海棠"><meta name="copyright" content="晚夜微雨问海棠"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Htmlinput中的 data 获取当前默认时间 &#96;&#96;&#96;html12345678910112. &#96;&#96;&#96;js    &#x2F;&#x2F; 3.文本框返程时间       $(document).ready(function () &amp;#123;           &#x2F;&#x2F; 显示默认日期           var time &#x3D; new Date();           var day &#x3D; (&quot;0&amp;quot">
<meta property="og:type" content="article">
<meta property="og:title" content="前端+后端知识汇总（2）">
<meta property="og:url" content="http://example.com/posts/6c53f471.html">
<meta property="og:site_name" content="晚夜微雨问海棠のBlog">
<meta property="og:description" content="Htmlinput中的 data 获取当前默认时间 &#96;&#96;&#96;html12345678910112. &#96;&#96;&#96;js    &#x2F;&#x2F; 3.文本框返程时间       $(document).ready(function () &amp;#123;           &#x2F;&#x2F; 显示默认日期           var time &#x3D; new Date();           var day &#x3D; (&quot;0&amp;quot">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img1.baidu.com/it/u=2163263263,2058666557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=497">
<meta property="article:published_time" content="2022-11-12T03:28:51.703Z">
<meta property="article:modified_time" content="2022-12-06T08:01:38.251Z">
<meta property="article:author" content="晚夜微雨问海棠">
<meta property="article:tag" content="杂七杂八">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img1.baidu.com/it/u=2163263263,2058666557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=497"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/posts/6c53f471"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/manifest.json"/><meta name="msapplication-TileColor" content="#49b1f5"/><link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon/128.png"/><link rel="icon" type="image/png" sizes="32x32" href="/img/siteicon/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/img/siteicon/16.png"/><link rel="mask-icon" href="/img/siteicon/128.png" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":150},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":650,"languages":{"author":"作者: 晚夜微雨问海棠","link":"链接: ","source":"来源: 晚夜微雨问海棠のBlog","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"top-right"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '前端+后端知识汇总（2）',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-12-06 16:01:38'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> <link rel="stylesheet" href="/swiper/swiper.min.css"> <link rel="stylesheet" href="/swiper/swiperstyle.css"> <link rel="stylesheet" href="/css/rightMenu.css"> <link rel="stylesheet" href="/css/constrain.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
<link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-blog@2.0.3/css/runtime/runtime.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/atom.xml" title="晚夜微雨问海棠のBlog" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg" style="background:url(https://img1.baidu.com/it/u=2163263263,2058666557&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=497);background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://img2.woyaogexing.com/2022/06/28/de1ce3dc65468fd4!400x400.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">97</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://img1.baidu.com/it/u=2163263263,2058666557&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=497')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">晚夜微雨问海棠のBlog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">前端+后端知识汇总（2）</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-12T03:28:51.703Z" title="发表于 2022-11-12 11:28:51">2022-11-12</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-12-06T08:01:38.251Z" title="更新于 2022-12-06 16:01:38">2022-12-06</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">12.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>48分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="前端+后端知识汇总（2）"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="Html"><a href="#Html" class="headerlink" title="Html"></a>Html</h1><h2 id="input中的-data-获取当前默认时间"><a href="#input中的-data-获取当前默认时间" class="headerlink" title="input中的 data 获取当前默认时间"></a>input中的 data 获取当前默认时间</h2><ol>
<li>```html<br><input id="currentDate" type="date" name="start"  class="laydate-icon form-control layer-date"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">    // 3.文本框返程时间</span><br><span class="line">       $(document).ready(function () &#123;</span><br><span class="line">           // 显示默认日期</span><br><span class="line">           var time = new Date();</span><br><span class="line">           var day = (&quot;0&quot; + time.getDate()).slice(-2);</span><br><span class="line">           var month = (&quot;0&quot; + (time.getMonth() + 1)).slice(-2);</span><br><span class="line">           var today = time.getFullYear() + &quot;-&quot; + (month) + &quot;-&quot; + (day);</span><br><span class="line">           $(&#x27;#currentDate&#x27;).val(today);</span><br><span class="line">       &#125;)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="轮播图"><a href="#轮播图" class="headerlink" title="轮播图"></a>轮播图</h2><ol>
<li>做轮播图,轮播图滚动时，是让 ul 来滚动的 不能直接插入图片，要放到小 li 中</li>
</ol>
<h2 id="文字超出用省略号显示"><a href="#文字超出用省略号显示" class="headerlink" title="文字超出用省略号显示"></a>文字超出用省略号显示</h2><ol>
<li><p>分为三步骤</p>
<ol>
<li><p>将文本超出的部分隐藏</p>
<ul>
<li>```css<br>overflow: hidden;<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">   - 1</span><br><span class="line"></span><br><span class="line">2. 必须在一行显示，不允许换行</span><br><span class="line"></span><br><span class="line">   - ```css</span><br><span class="line">     white-space: nowrap;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>超出用省略号显示</p>
<ul>
<li>```css<br>text-overflow: ellipsis;<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. ```css</span><br><span class="line">   &lt;div class=&quot;news_bd&quot;&gt;</span><br><span class="line">                           &lt;ul&gt;</span><br><span class="line">                               &lt;li&gt;</span><br><span class="line">                                   &lt;a href=&quot;&quot;&gt;&lt;strong&gt;[重磅]&lt;/strong&gt;它来了、它来了、它来了、它来了、它来了、&lt;/a&gt;</span><br><span class="line">                               &lt;/li&gt;</span><br><span class="line">                               &lt;li&gt;</span><br><span class="line">                                   &lt;a href=&quot;&quot;&gt;&lt;strong&gt;[重磅]&lt;/strong&gt;它来了、它来了、&lt;/a&gt;</span><br><span class="line">                               &lt;/li&gt;</span><br><span class="line">                               &lt;li&gt;</span><br><span class="line">                                   &lt;a href=&quot;&quot;&gt;&lt;strong&gt;[重磅]&lt;/strong&gt;它来了、它来了、&lt;/a&gt;</span><br><span class="line">                               &lt;/li&gt;</span><br><span class="line">                               &lt;li&gt;</span><br><span class="line">                                   &lt;a href=&quot;&quot;&gt;&lt;strong&gt;[重磅]&lt;/strong&gt;它来了、它来了、它来了、它来了、它来了、&lt;/a&gt;</span><br><span class="line">                               &lt;/li&gt;</span><br><span class="line">                               &lt;li&gt;</span><br><span class="line">                                   &lt;a href=&quot;&quot;&gt;&lt;strong&gt;[重磅]&lt;/strong&gt;它来了、它来了、&lt;/a&gt;</span><br><span class="line">                               &lt;/li&gt;</span><br><span class="line">                           &lt;/ul&gt;</span><br><span class="line">                       &lt;/div&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
</li>
</ol>
<h2 id="鼠标变小手"><a href="#鼠标变小手" class="headerlink" title="鼠标变小手"></a>鼠标变小手</h2><ol>
<li><p>```css<br> /<em> 鼠标变小手 </em>/</p>
<pre><code>cursor: pointer;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">## 移动盒子的位置</span><br><span class="line"></span><br><span class="line">1. 定位</span><br><span class="line"></span><br><span class="line">2. 盒子的外边距 margin</span><br><span class="line"></span><br><span class="line">3. 2d转换移动 transfrom</span><br><span class="line"></span><br><span class="line">4. ```css</span><br><span class="line">   /* X 就是 X轴移动，Y 就是 Y轴移动 */</span><br><span class="line">   transform:translate(X,Y);</span><br></pre></td></tr></table></figure>
</li>
<li><p>X轴就是以页面左上角为0点，向右越来越大</p>
</li>
<li><p>Y轴就是以页面左上角为0点，向下越来越大</p>
</li>
<li><p>如果只移动一个轴，另一个轴不能省略，可写0</p>
</li>
<li><p>```css<br>/<em> 向 X轴移动，Y轴不移动 </em>/<br>transform:translate(x,0);</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">9. 也可以分开写</span><br><span class="line"></span><br><span class="line">10. ```css</span><br><span class="line">    /* 向X轴移动 100px */</span><br><span class="line">    transform:translateX(100px);</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="CSS-书写三角"><a href="#CSS-书写三角" class="headerlink" title="CSS 书写三角"></a>CSS 书写三角</h2><ol>
<li><p>利用伪元素加旋转</p>
</li>
<li><p>```html<br><div>
</div></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. ```css</span><br><span class="line">   div&#123;</span><br><span class="line">       width:249px;</span><br><span class="line">       height:30px;</span><br><span class="line">       border:1px solid bloud;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   /* after 在后面插入 */</span><br><span class="line">   div::after&#123;</span><br><span class="line">       /* 伪元素必写，可以不给值 */</span><br><span class="line">       content:&quot;&quot;;</span><br><span class="line">       position:absolute;</span><br><span class="line">       top:8px;</span><br><span class="line">       right:15px;</span><br><span class="line">       width:10px;</span><br><span class="line">       height:10px;</span><br><span class="line">       /* 给一个有边框和上边框 */</span><br><span class="line">       border-right:1px solid #000;</span><br><span class="line">       border-top:1px solid #000;</span><br><span class="line">       /* 旋转 */</span><br><span class="line">       transform:rotate(45deg);</span><br><span class="line">       /* 加过渡效果，谁做过渡给谁加 */</span><br><span class="line">       transition:all 0.2s;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>鼠标经过 div 里面的三角旋转</p>
</li>
<li><p>```css<br>div:hover::after{</p>
<pre><code>transform:rotate(22deg);
</code></pre><p>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 结构伪类选择器</span><br><span class="line"></span><br><span class="line">1. 有了结构伪类选择器，便不用在起类名了</span><br><span class="line"></span><br><span class="line">2. 常用的有  :nth-child(1)</span><br><span class="line"></span><br><span class="line">3. ```css</span><br><span class="line">   .app ul li:nth-child(1) img &#123;</span><br><span class="line">     width: 10px;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="外边距合并问题"><a href="#外边距合并问题" class="headerlink" title="外边距合并问题"></a>外边距合并问题</h2><ol>
<li>因为子盒子加了 margin-top 会吧盒子带下来，</li>
<li>所以要加 overflow: hidden;</li>
</ol>
<h2 id="flex-布局设置侧轴对齐方式，多行"><a href="#flex-布局设置侧轴对齐方式，多行" class="headerlink" title="flex 布局设置侧轴对齐方式，多行"></a>flex 布局设置侧轴对齐方式，多行</h2><ol>
<li><p>先换行</p>
<ul>
<li>```css<br>flex-wrap:wrap;<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用，align-content</span><br><span class="line"></span><br><span class="line">   - ```css</span><br><span class="line">     居中对齐</span><br><span class="line">     align-content: center;</span><br><span class="line"></span><br><span class="line">     帖着上下沿对齐</span><br><span class="line">     align-content:space-between;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
<h2 id="视口宽度"><a href="#视口宽度" class="headerlink" title="视口宽度"></a>视口宽度</h2><ol>
<li>```css<br><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### 手机端清除样式</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">   /* 手机端清除样式 */</span><br><span class="line"></span><br><span class="line">   /* 点击高亮我们需要清除，设置为 transparent 完全透明 */</span><br><span class="line">   * &#123;</span><br><span class="line">     -webkit-tap-highlight-color: transparent;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   /* 在移动端 浏览器默认的外观在 ios 上加这个属性才能给按钮和输入框自定义样式 */</span><br><span class="line">   inputP &#123;</span><br><span class="line">     -webkit-appearance: none;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   /* 禁用长按页面时的弹出菜单 */</span><br><span class="line">   img,</span><br><span class="line">   a &#123;</span><br><span class="line">     -webkit-touch-callout: none;</span><br><span class="line">   &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="移动端常用-body-样式"><a href="#移动端常用-body-样式" class="headerlink" title="移动端常用 body 样式"></a>移动端常用 body 样式</h2><ol>
<li><p>```css<br>body {</p>
<pre><code>max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, &quot;Lucida Grande&quot;, Verdana, &quot;Microsoft Yahei&quot;, STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
</code></pre><p>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 固定定位</span><br><span class="line"></span><br><span class="line">1. 固定定位要有宽度</span><br><span class="line"></span><br><span class="line">2. ```css</span><br><span class="line">   .search-index &#123;</span><br><span class="line">     position: fixed;</span><br><span class="line">     top: 0;</span><br><span class="line">     left: 0;</span><br><span class="line">     /* 固定定位要有宽度 */</span><br><span class="line">     width: 100%;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>已经写过固定定位，margin：0 auto；无效，此时要想居中对齐</p>
</li>
<li><p>先向左移动 50%，再沿 x 轴 移动 -50%，反方向移动</p>
</li>
<li><p>```css<br> /<em>固定定位跟父级没关系，以屏幕为准</em>/<br>  position: fixed;<br>  top: 0;<br>  /<em> 居中对齐 </em>/<br>  left: 50%;<br>  transform: translateX(-50%);</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 修改 input 文本框中  placehoder 的样式</span><br><span class="line"></span><br><span class="line">1. 颜色调整</span><br><span class="line"></span><br><span class="line">   - ```css</span><br><span class="line">     input::-webkit-input-placeholder &#123;</span><br><span class="line">         color: #BDCADA;</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>文字居中显示</p>
<ul>
<li>```css<br>input::-ms-input-placeholder{text-align: center;}<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 可以将居中属性替换为定位属性：</span><br><span class="line"></span><br><span class="line">   - ```css</span><br><span class="line">     input::-webkit-input-placeholder&#123;text-align: center;&#125;</span><br><span class="line"></span><br><span class="line">     input::-webkit-input-placeholder&#123;position：relative；left：20px；&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
<h2 id="取消点击文本框时出现的边框"><a href="#取消点击文本框时出现的边框" class="headerlink" title="取消点击文本框时出现的边框"></a>取消点击文本框时出现的边框</h2><ol>
<li><p>取消点击文本框时出现的边框</p>
</li>
<li><p>```css</p>
<h1 id="text-index-focus"><a href="#text-index-focus" class="headerlink" title="text_index:focus{"></a>text_index:focus{</h1><pre><code>outline:none;
</code></pre><p>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## border-radius 的四个值</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">   /* 左上角 右上角 右下角 左下角 */</span><br><span class="line">       border-radius: 0px 5px 5px 0px;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="使不能输入"><a href="#使不能输入" class="headerlink" title="使不能输入"></a>使不能输入</h2><ol>
<li>disabled 属性</li>
</ol>
<h2 id="进度条"><a href="#进度条" class="headerlink" title="进度条"></a>进度条</h2><ol>
<li><p>range：进度条</p>
</li>
<li><p>```html<br>  <input type="range" /></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 属性：</span><br><span class="line"></span><br><span class="line">   &gt; （1）min：最小值</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （2）max：最大值</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （3）step：步长值，每次移动多少距离</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># C#</span><br><span class="line"></span><br><span class="line">## 关闭所有窗口</span><br><span class="line"></span><br><span class="line">1. ```c#</span><br><span class="line">   //关闭系统</span><br><span class="line">               System.Environment.Exit(0);//0为正常关闭，1为非正常关闭</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="获取当前时间"><a href="#获取当前时间" class="headerlink" title="获取当前时间"></a>获取当前时间</h2><ol>
<li><p>```c#<br> DateTime p = DateTime.Today;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2.</span><br><span class="line"></span><br><span class="line"># Js</span><br><span class="line"></span><br><span class="line">## 获取当前时间</span><br><span class="line"></span><br><span class="line">1. ```js</span><br><span class="line">   var t = null;</span><br><span class="line">      t = setTimeout(time, 1000); //开始运行</span><br><span class="line">      function time() &#123;</span><br><span class="line">          clearTimeout(t); //清除定时器</span><br><span class="line">          dt = new Date();</span><br><span class="line">          var y = dt.getFullYear();</span><br><span class="line">          var mt = dt.getMonth() + 1;</span><br><span class="line">          var day = dt.getDate();</span><br><span class="line">          var h = dt.getHours(); //获取时</span><br><span class="line">          var m = dt.getMinutes(); //获取分</span><br><span class="line">          var s = dt.getSeconds(); //获取秒</span><br><span class="line">          document.querySelector(&quot;.showTime&quot;).innerHTML =</span><br><span class="line">              &quot;当前时间：&quot; +</span><br><span class="line">              y +</span><br><span class="line">              &quot;年&quot; +</span><br><span class="line">              mt +</span><br><span class="line">              &quot;月&quot; +</span><br><span class="line">              day +</span><br><span class="line">              &quot;-&quot; +</span><br><span class="line">              h +</span><br><span class="line">              &quot;时&quot; +</span><br><span class="line">              m +</span><br><span class="line">              &quot;分&quot; +</span><br><span class="line">              s +</span><br><span class="line">              &quot;秒&quot;;</span><br><span class="line">          t = setTimeout(time, 1000); //设定定时器，循环运行</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>```html<br><span class="showTime">当前时间：2020年3月17-0时54分14秒</span></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 鼠标悬浮，盒子抖动</span><br><span class="line"></span><br><span class="line">1. 鼠标浮动，盒子边框变色，本质是盒子有1px 边框，只不过是透明的 ,就不会出现抖动效果</span><br><span class="line"></span><br><span class="line">2. 可以给盒子加上 1像素的边框，并显示为透明色</span><br><span class="line"></span><br><span class="line">3. ```css</span><br><span class="line">       border: 1px solid transparent;</span><br></pre></td></tr></table></figure>
</li>
<li><p>这样鼠标经过就不会出现抖动效果了</p>
</li>
</ol>
<h4 id="鼠标经过部分边框没显示"><a href="#鼠标经过部分边框没显示" class="headerlink" title="鼠标经过部分边框没显示"></a>鼠标经过部分边框没显示</h4><ol>
<li><p>因为图片压住了部分边框了，所有要给img标签的父亲去掉溢出的部分</p>
</li>
<li><p>如果是 div 或 其他盒子，就不会出现这种情况</p>
</li>
<li><p>```css<br>overflow: hidden;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 小提示：</span><br><span class="line"></span><br><span class="line">1. 如果样式过乱，一定要不要忘记要清除浮动</span><br><span class="line"></span><br><span class="line">## （）（）函数立即执行函数</span><br><span class="line"></span><br><span class="line">1.  (function()&#123; &#125;)() 立即执行函数，沙箱函数</span><br><span class="line">2.  为了防止变量名冲突，可采用立即执行函数策略</span><br><span class="line">3.  多个立即执行函数之间必须用 封号隔开</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 居中对齐</span><br><span class="line"></span><br><span class="line">1. 在 flex 布局中</span><br><span class="line"></span><br><span class="line">2. 设置 Y 轴为主轴，竖向显示内容</span><br><span class="line"></span><br><span class="line">3. 居中对齐</span><br><span class="line"></span><br><span class="line">4. ```css</span><br><span class="line">     display: flex;</span><br><span class="line">       // 以Y轴为主轴，竖向显示</span><br><span class="line">       flex-direction: column;</span><br><span class="line">       // 居中对齐</span><br><span class="line">       align-items: center;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="三元表达式"><a href="#三元表达式" class="headerlink" title="三元表达式"></a>三元表达式</h2><ol>
<li>有一个操作符为 一元  ++num</li>
<li>有二个操作符为 二元 3+5</li>
<li>有三个操作符为 三元 ?:</li>
<li>三元表达式的语法规范</li>
<li>三元表达式的结果是一个布尔值</li>
<li>三元表达式的结果是一个布尔值，所以可以用来判断是否执行语句</li>
<li>条件表达式 ？ 表达式1 ： 表达式2</li>
</ol>
<h2 id="格式化时间"><a href="#格式化时间" class="headerlink" title="格式化时间"></a>格式化时间</h2><ol>
<li>```js<pre><code>// 格式化时间
  function getDate() &#123;
    // 格式化时间 年月日
    var date = new Date()
    // 2.写一个 2022年6月5日 星期天
    var year = date.getFullYear()
    var month = date.getMonth() + 1 // 月份要  +1
    var dates = date.getDate()
    var day = date.getDay()
    // 使用字面量创建数组，第一个必须是星期日，因为索引为 0,返回的星期是 数字 0~6，0是星期日，1 是星期一，所以可以替换索引
    var arr = [&#39;星期天&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;]
    // arr[day] 替换索引
    return &#39;今天是：&#39; + year + &#39;年&#39; + month + &#39;月&#39; + dates + &#39;日 &#39; + arr[day]
  &#125;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## console.dir（）</span><br><span class="line"></span><br><span class="line">1. console.dir（）： 打印出该对象的所有属性和属性值，更好的查看里面的属性和方法。</span><br><span class="line"></span><br><span class="line">## 伪数组</span><br><span class="line"></span><br><span class="line">1. 具有数组的部分功能属性，但是不是数组</span><br><span class="line">2. 伪数组，在循环里面的每一个元素 btn[ i ]</span><br><span class="line"></span><br><span class="line">## js 获取元素</span><br><span class="line"></span><br><span class="line">1. 获取的是 tbody 里面所有的行</span><br><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">   // 1.获取元素 获取的是 tbody 里面所有的行</span><br><span class="line">   var trs = document.querySelector(&#x27;tbody&#x27;).querySelectorAll(&#x27;tr&#x27;)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="获取值的两种方式"><a href="#获取值的两种方式" class="headerlink" title="获取值的两种方式"></a>获取值的两种方式</h2><ol>
<li><p>. 对象名 和[‘ ’]   都能获取对象属性的值</p>
</li>
<li><p>```js</p>
<div getTime="20" data-index="2" data-list-name="andy">123</div>

<pre><code>var div = document.querySelector(&#39;div&#39;)
  console.log(div.dataset.index)
  console.log(div.dataset[&#39;index&#39;]) // 这两种方法都可以得到某个对象的某个属性
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. dataset 只能获取以 data- 开头的属性</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 获取点击到的事件对象</span><br><span class="line"></span><br><span class="line">1. e.target</span><br><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">    ul.addEventListener(&#x27;click&#x27;, function (e) &#123;</span><br><span class="line">           // e.target 这个可以得到点击的事件对象</span><br><span class="line">           e.target.style.backgroundColor = &#x27;plum&#x27;</span><br><span class="line">         &#125;)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="查看大图案例"><a href="#查看大图案例" class="headerlink" title="查看大图案例"></a>查看大图案例</h2><ol>
<li><p>查看大图案例，原理是鼠标移动</p>
</li>
<li><p>图片跟随鼠标移动代码</p>
</li>
<li><p>```js</p>
<pre><code> // 获取图片
  var pic = document.querySelector(&#39;img&#39;)
  // mousemove 事件，鼠标移动 mouse：鼠标，move：移动
  document.addEventListener(&#39;mousemove&#39;, function (e) &#123;
    // mousemove 只要鼠标移动 1px 就会触发这个事件
    // 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，吧这个 x 和 y 坐标作为图片的 top 和 left 值 就可以移动图片了
    var x = e.pageX // 获得鼠标在页面中的坐标 x
    var y = e.pageY // 获得鼠标在页面中的坐标 y
    console.log(&#39;x坐标&#39; + x, &#39;y坐标&#39; + y)
    // 如果想要鼠标在图片中心，移动宽高的一半即可
    pic.style.left = x - 50 + &#39;px&#39;
    pic.style.top = y - 40 + &#39;px&#39;
  &#125;)
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## this</span><br><span class="line"></span><br><span class="line">1. this的指向在函数定义的时候是确定不了的，</span><br><span class="line"></span><br><span class="line">2. 只有函数执行的时候才能确定 this 到底指向谁，</span><br><span class="line"></span><br><span class="line">3. 一般情况下this的最终指向的是那个调用它的对象</span><br><span class="line"></span><br><span class="line">4. &gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （1.）全局作用域或者普通函数中的 this 指向的的全局对象 window （注意定时器里面的 this 指向 window）</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （2.）方法调用中谁调用 this 指向谁</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （3.）构造函数中 this 指向构造函数的实例</span><br><span class="line"></span><br><span class="line">5. ```js</span><br><span class="line">     // this 指向问题，一般情况下 this 的最终指向的是那个调用它的对象</span><br><span class="line">         // 1.全局作用域或者普通函数中的 this 指向的的全局对象 window （注意定时器里面的 this 指向 window）</span><br><span class="line">         console.log(this)</span><br><span class="line">         function fn() &#123;</span><br><span class="line">           console.log(this)</span><br><span class="line">         &#125;</span><br><span class="line">         fn()</span><br><span class="line">         // 2.方法调用中谁调用 this 指向谁</span><br><span class="line">         var o = &#123;</span><br><span class="line">           sayHi: function () &#123;</span><br><span class="line">             console.log(this) // 指向的是 o 这个对象</span><br><span class="line">           &#125;,</span><br><span class="line">         &#125;</span><br><span class="line">         o.sayHi()</span><br><span class="line">         var btn = document.querySelector(&#x27;button&#x27;)</span><br><span class="line">         btn.addEventListener(&#x27;click&#x27;, function () &#123;</span><br><span class="line">           console.log(this) // 指向的是 btn 这个元素</span><br><span class="line">         &#125;)</span><br><span class="line">         // 3.构造函数中 this 指向构造函数的实例</span><br><span class="line">         function Fun() &#123;</span><br><span class="line">           console.log(this) // 指向的是 Fun 函数的实例</span><br><span class="line">         &#125;</span><br><span class="line">         var fun = new Fun()</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="navigator-对象"><a href="#navigator-对象" class="headerlink" title="navigator 对象"></a>navigator 对象</h2><ol>
<li><p>user-agent 头部的值，利用这个属性可以判断打开的页面是手机端还是电脑端</p>
</li>
<li><p>```js</p>
<script>

<p> if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {</p>
<pre><code>      window.location.href = &#39;../H5/index.html&#39; // 手机端
    &#125; else &#123;
      window.location.href = &#39;../H5/index.html&#39; // 电脑端
    &#125;
  &#125;)
</code></pre><p>&lt;/script&gt;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 移除事件监听</span><br><span class="line"></span><br><span class="line">1. ```js</span><br><span class="line">    //  让移动事件停止 document 页面 removeEventListener移除事件监听</span><br><span class="line">   // mousemove 事件 move 事件名称</span><br><span class="line">   	document.removeEventListener(&#x27;mousemove&#x27;, move)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="定时器注意点："><a href="#定时器注意点：" class="headerlink" title="定时器注意点："></a>定时器注意点：</h2><ol>
<li><p>bug：不断点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器</p>
</li>
<li><p>解决方案：让元素只有一个定时器，先清除以前的定时器，只保留当前的一个定时器即可</p>
</li>
<li><p>```js<br>  function animate(obj, target) {</p>
<pre><code>    // 当不断点击按钮，这个元素的速度会越来越快，因为开启了太多了定时器
    // 解决方案，让元素只有一个定时器执行
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer)
    obj.timer = setInterval(() =&gt; &#123;
      if (obj.offsetLeft &gt; target) &#123;
        // 停止定时器
        clearInterval(obj.timer)
      &#125; else &#123;
        obj.timer.style.left = obj.offsetLeft + 5 + &#39;px&#39;
      &#125;
    &#125;, 50)
  &#125;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 获取元素的真实宽度</span><br><span class="line"></span><br><span class="line">1. offsetWidth:获得元素的真实宽度</span><br><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">   // 获得图片的真实宽度</span><br><span class="line">   var focusWidth = focus.offsetWidth</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="javascript"><a href="#javascript" class="headerlink" title="javascript:;"></a>javascript:;</h2><ol>
<li><p>javascript:; 防止跳转页面，不会回到页面顶部</p>
</li>
<li><p><code>#</code>防止跳转页面，回到页面顶部</p>
</li>
<li><p>```js<br><a href="javascript:;" class="arrow-r">  </a></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 无缝滚动原理</span><br><span class="line"></span><br><span class="line">1. 轮播图，左右侧按钮，到最后一个时，自动调转到第一个</span><br><span class="line"></span><br><span class="line">2. 原理：</span><br><span class="line"></span><br><span class="line">3. 吧 ul 第一个 li 复制一份，放到 ul 的最后面</span><br><span class="line"></span><br><span class="line">4. 当图片滚动到克隆的最后一张图片时，让 ul 快速的、不做动画的跳转到最左侧：left 为0</span><br><span class="line"></span><br><span class="line">5. 同时 num 赋值为0，可以从新开始滚动图片了</span><br><span class="line"></span><br><span class="line">6. ```js</span><br><span class="line">     var num = 0</span><br><span class="line">     arrow_r.addEventListener(&#x27;click&#x27;, function () &#123;</span><br><span class="line">       // 无缝滚动，如果走到了，最后复制的一张图片，此时 ul 要快速复原，left 改为 0</span><br><span class="line">         // ul.children.length - 1 小 li 也就是 图片的长度 -1，就是复制的那一张图片了</span><br><span class="line">       if (num == ul.children.length - 1) &#123;</span><br><span class="line">         ul.style.left = 0</span><br><span class="line">         num = 0</span><br><span class="line">       &#125;</span><br><span class="line">       num++</span><br><span class="line">     &#125;)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="短路运算符的巧妙运用"><a href="#短路运算符的巧妙运用" class="headerlink" title="短路运算符的巧妙运用"></a>短路运算符的巧妙运用</h2><ol>
<li><p>```js</p>
<pre><code> // 回调函数写到定时器结束里面
   if (callback) &#123;
     // 调用函数
     callback()
   &#125;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 等同与</span><br><span class="line"></span><br><span class="line">3. ```js</span><br><span class="line">    // 利用短路运算</span><br><span class="line">         // &amp;&amp; 只要有一个为 false 就是 false</span><br><span class="line">         callback &amp;&amp; callback()</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>4.</p>
<h2 id="节流阀"><a href="#节流阀" class="headerlink" title="节流阀"></a>节流阀</h2><ol>
<li><p>防止轮播图按钮连续点击造成播放过快</p>
</li>
<li><p>节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发</p>
</li>
<li><p>核心实现思路：利用回调函数，添加一个变量，来控制，锁住函数和解锁函数</p>
</li>
<li><p>开始设置一个变量 var flag = true</p>
</li>
<li><p>if ( flag){flag = false;do something} 关闭水龙头</p>
</li>
<li><p>利用回调函数动画执行完毕，flag = true 打开水龙头</p>
</li>
<li><p>```js<br> // flag 节流阀<br>  var flag = true</p>
<pre><code>// 8.右侧按钮点击事件
</code></pre><p>  arrow_r.addEventListener(‘click’, function () {</p>
<pre><code>   if (flag) &#123;
      flag = false // 关闭节流阀
  &#125;
  // 动画函数
  animate(ul, -num * focusWidth, function () &#123;
    flag = true // 开启节流阀
  &#125;)
</code></pre><p>  })</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">8.</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## js 插件使用注意点</span><br><span class="line"></span><br><span class="line">1. 自己的 js.文件 依赖于谁，或者说需要用到那个js 文件，就写到 那个 js 文件下方</span><br><span class="line"></span><br><span class="line">2. 千万不要写到上方不然不起作用</span><br><span class="line"></span><br><span class="line">3. ```js</span><br><span class="line">       &lt;!-- 引入swiper js 文件 --&gt;</span><br><span class="line">       &lt;script src=&quot;js/swiper.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">       &lt;!-- 引入我们自己的js文件 --&gt;</span><br><span class="line">       &lt;script src=&quot;js/index.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="jquery-中的显示与隐藏"><a href="#jquery-中的显示与隐藏" class="headerlink" title="jquery 中的显示与隐藏"></a>jquery 中的显示与隐藏</h2><ol>
<li>隐藏元素 hide()</li>
<li>显示元素 show()</li>
<li>鼠标经过 mouseover</li>
<li>鼠标离开 mouseout</li>
</ol>
<h2 id="判断自身属性是不是自己的"><a href="#判断自身属性是不是自己的" class="headerlink" title="判断自身属性是不是自己的"></a>判断自身属性是不是自己的</h2><ol>
<li>```js<br>return this.items.hasOwnProperty(value)<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 开平方根</span><br><span class="line"></span><br><span class="line">1. sqrt:开平方根</span><br><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">           // 1.获取 num 的平方根 sqrt:开平方根</span><br><span class="line">           var temp = parseInt(Math.sqrt(num))</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="判断某个实例是否属于某个对象"><a href="#判断某个实例是否属于某个对象" class="headerlink" title="判断某个实例是否属于某个对象"></a>判断某个实例是否属于某个对象</h2><ol>
<li><p>instanceof ：判断某个实例是否属于某个对象，返回布尔值</p>
</li>
<li><p>```js</p>
<pre><code>// 判断 result 是否 Promise 类型的对象
  if (result instanceof Promise) &#123;

  &#125;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 返回对象的构造函数</span><br><span class="line"></span><br><span class="line">1. constructor：返回对象的构造函数</span><br><span class="line"></span><br><span class="line">## for 循环中 let 和 var 的区别</span><br><span class="line"></span><br><span class="line">1. var：全局的</span><br><span class="line"></span><br><span class="line">2. let：局部的</span><br><span class="line"></span><br><span class="line">3. 例子：</span><br><span class="line"></span><br><span class="line">   &gt; ```js</span><br><span class="line">   &gt; for(var i = 0; i&lt;=3; i++)&#123;</span><br><span class="line">   &gt;     console.log(i)</span><br><span class="line">   &gt; &#125;</span><br><span class="line">   &gt; console.log(i) // i=&gt;4</span><br><span class="line">   &gt; // 此时 var 定义的变量 i 为全局的</span><br><span class="line">   &gt; window.i</span><br></pre></td></tr></table></figure>
<p>&gt;</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i&lt;=<span class="number">3</span>; i++)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(i) <span class="comment">// i=&gt; 报错</span></span><br><span class="line"><span class="comment">// 此时，let 定义的变量 i 为局部变量，for循环外部是不能调用的</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">i</span> <span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h2><ol>
<li>关键字：lessons.sort()</li>
<li>这是系统提供的函数方法</li>
</ol>
<h2 id="addEventListener-方法"><a href="#addEventListener-方法" class="headerlink" title="addEventListener() 方法"></a>addEventListener() 方法</h2><ol>
<li><p><code>addEventListener()</code> 方法用于向指定元素添加<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=监听&amp;spm=1001.2101.3001.7020">监听</a>事件。且同一元素目标可重复添加，不会覆盖之前相同事件，</p>
</li>
<li><p>配合 <code>removeEventListener()</code>方法来移除事件。</p>
</li>
<li><p>参数说明：有三个参数</p>
<blockquote>
<p>1、参数一、事件名称，字符串，必填。</p>
<p>（1）事件名称不用带 <code>on</code>前缀，点击事件直接写 <code>click</code>,键盘事件写 <code>keyup</code></p>
<p>2、参数二、执行函数，必填。</p>
<p>（1）填写需要执行的函数，如：function（）（代码）</p>
<p>（2）当目标对象事件触发时，会传入一个事件参数，参数名称可自定义，</p>
<p>（3）如填写event，不需要也可不填写。事件对象的类型取决于特定的事件。</p>
<p>（4）例如，“click”事件属于MouseEvent（鼠标事件）对象。<br>（5）function（event）（console.log（event））</p>
<p>3、参数三、触发类型，布尔型，可空</p>
<p>（1）true - 事件在捕获阶段执行</p>
<p>（2）false - 事件在冒泡阶段执行，默认是 false</p>
</blockquote>
</li>
</ol>
<h2 id="addEventListener和on的区别"><a href="#addEventListener和on的区别" class="headerlink" title="addEventListener和on的区别"></a>addEventListener和on的区别</h2><ol>
<li><p>为某元素设定事件触发函数时 , addEventListener除了可以设置元素触发顺序外，还可以多次绑定事件.</p>
</li>
<li><p>on 事件多次绑定的话会被覆盖 , 只能绑定一个事件</p>
</li>
<li><p>例子：</p>
</li>
<li><p>addEventListener</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=<span class="string">&quot;height:200px;width:200px;background-color:red&quot;</span>&gt;点击&lt;/div&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="title function_">alert</span>(<span class="string">&quot;mesg1&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="title function_">alert</span>(<span class="string">&quot;mesg2&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<p>依次弹出mesg1 和 mesg2.</p>
</blockquote>
</li>
<li><p>on:</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">box.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="string">&quot;message1&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line">box.<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="title function_">alert</span>(<span class="string">&quot;message2&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>只弹出mesg2 , 因为mesg1被mesg2覆盖了.</p>
</blockquote>
</li>
</ol>
<h2 id="for…of-运行原理"><a href="#for…of-运行原理" class="headerlink" title="for…of 运行原理"></a>for…of 运行原理</h2><ol>
<li>就是看对象或数组中有没有 Symbol.iterator 这个属性，如果有就可以遍历，没有就不能遍历</li>
<li>Symbol.iterator 是 JS 内置的一个属性</li>
</ol>
<h2 id="如何拿到对象中所有的属性"><a href="#如何拿到对象中所有的属性" class="headerlink" title="如何拿到对象中所有的属性"></a>如何拿到对象中所有的属性</h2><ol>
<li><p>关键字：Object.keys（对象名）</p>
</li>
<li><p>关键字：Object.getOwnPropertyNames（对象名）</p>
</li>
<li><p>关键字：for…in</p>
</li>
<li><p>对象名[属性名]</p>
</li>
<li><p>关键字：Object.getOwnPropertySymbols（对象名），拿到对象中的 Symbol，通常配合 for..of 使用</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 拿到 对象中的 symbol</span></span><br><span class="line">     <span class="keyword">let</span> symList = <span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(student)</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(symList)</span><br><span class="line">     <span class="comment">// 拿到 symbol 的值</span></span><br><span class="line">     <span class="keyword">for</span> (<span class="keyword">let</span> pro <span class="keyword">of</span> symList) &#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(student[pro])</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>js 中内置的 symbol</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Symbol</span>.<span class="property">iterator</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>实例：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如何拿到对象的所有属性</span></span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(student))</span><br><span class="line"></span><br><span class="line">   <span class="keyword">let</span> pros = <span class="title class_">Object</span>.<span class="title function_">getOwnPropertyNames</span>(student)</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(pros)</span><br><span class="line"></span><br><span class="line">   <span class="keyword">for</span> (<span class="keyword">let</span> pro <span class="keyword">in</span> student) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(pro)</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   student[level]</span><br><span class="line"></span><br><span class="line">   <span class="comment">// 拿到 对象中的 symbol</span></span><br><span class="line">   <span class="keyword">let</span> symList = <span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(student)</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(symList)</span><br><span class="line">   <span class="comment">// 拿到 symbol 的值</span></span><br><span class="line">   <span class="keyword">for</span> (<span class="keyword">let</span> pro <span class="keyword">of</span> symList) &#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(student[pro])</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">// js 中内置的 symbol</span></span><br><span class="line">   <span class="title class_">Symbol</span>.<span class="property">iterator</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><ol>
<li>Number（数值）</li>
<li>String（字符串）</li>
<li>Array（数组）</li>
<li>Boolean（布尔）</li>
<li>Null（空）</li>
<li>Undefined（未定义）</li>
<li>Symbol（）</li>
<li>小提示：数据也可以使用构造函数来创建，也就是 C#中的 实例化对象，原理一样，js 就是使用 C# 来写的，所以 编程学到最后就可以互通的</li>
</ol>
<h1 id="sql"><a href="#sql" class="headerlink" title="sql"></a>sql</h1><h2 id="触发器"><a href="#触发器" class="headerlink" title="触发器"></a>触发器</h2><ol>
<li><p>当一个表中的数据添加时，根据 名字 更新另一个表的一个字段</p>
</li>
<li><p>```sql<br>go<br>if exists(select * from sysobjects where name=’JF_Member_Update’)</p>
<pre><code>drop view JF_Member_Update
</code></pre><p>go<br>create trigger JF_Member_Update<br>on Order_d_DB<br>after insert,update,delete<br>as<br>if exists(select Order_id from Order_d_DB)<br>begin</p>
<pre><code>update Member SET
    Member.Member_JiFen +=&#39;20&#39;
FROM inserted where Member.Member_Name = Order_Name
</code></pre><p>end</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># 小技巧</span><br><span class="line"></span><br><span class="line">## VScode 快速导航</span><br><span class="line"></span><br><span class="line">1. ctrl + g</span><br><span class="line">2. 输入 1 就是第1行代码</span><br><span class="line"></span><br><span class="line">## 浮动转换</span><br><span class="line"></span><br><span class="line">1. 加宽之后要转换为块级元素，但是加浮动就不需要在转化了</span><br><span class="line"></span><br><span class="line">## Css3 盒子模型</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">   box-sizing: border-box;</span><br></pre></td></tr></table></figure>
</li>
<li><p>有了这个盒子模型，border 就可以放进去了，且不会撑大盒子</p>
</li>
<li><p>CSS3 的盒子模型是将 padding 和 border 都算进去的</p>
</li>
</ol>
<h2 id="flex-布局常见思路"><a href="#flex-布局常见思路" class="headerlink" title="flex 布局常见思路"></a>flex 布局常见思路</h2><ol>
<li><p><img src= "" data-lazy-src="%E7%9B%B8%E5%85%B3%E5%9B%BE%E7%89%87/flex%E5%B8%B8%E8%A7%81%E5%B8%83%E5%B1%80%E6%80%9D%E8%B7%AF.jpg" alt=""></p>
</li>
<li><p>吧主轴设置为 y轴，就能实现图片在上边 字体在下边了</p>
</li>
<li><p>如果要居中，吧侧轴设置为居中对齐</p>
</li>
<li><p>在 flex 布局中 ，也不会出现 边距合并的问题</p>
</li>
<li><p>flex 布局也可写 百分数</p>
<ul>
<li>```css<br>.subnav-entry li {<br>  flex: 20%;<br>}<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">   - 默认100% ,占其中的 20%</span><br><span class="line"></span><br><span class="line">   - 里面的子盒子 可以 写 % 相对于父级来说的</span><br><span class="line"></span><br><span class="line">## 精灵图</span><br><span class="line"></span><br><span class="line">1. 使用精灵图后一定要缩放为原来的一半 宽 32，高 自适应</span><br><span class="line"></span><br><span class="line">2. ```css</span><br><span class="line">     /* 精灵图 */</span><br><span class="line">     background: url(../images/localnav_bg.png) no-repeat 0 0;</span><br><span class="line">     /* 使用精灵图后一定要缩放为原来的一半 宽 32，高 自适应 */</span><br><span class="line">     background-size: 32 auto;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
<h2 id="伪类结构选择器"><a href="#伪类结构选择器" class="headerlink" title="伪类结构选择器"></a>伪类结构选择器</h2><ol>
<li><p>注意：伪类结构选择器一定不要忘了空格</p>
</li>
<li><p>```css<br>.nav-items:nth-child(1) a {<br>  border: 0;<br>  /<em> 使用精灵图 </em>/<br>  background: url(../images/hotel.png) no-repeat bottom center;<br>  /<em> 宽 121 高 自适应 </em>/<br>  background-size: 121px auto;<br>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 如果 a 前面，没有加空格，就会失去作用</span><br><span class="line"></span><br><span class="line">## 使用 rem 必须修改基准值</span><br><span class="line"></span><br><span class="line">1. 因为基准值必须和 稿件 基准值一样</span><br><span class="line">2. 点击设置 搜索 cssrem</span><br><span class="line">3. 修改 root font size：基准值</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 栅格布局</span><br><span class="line"></span><br><span class="line">1. 在栅格布局中，使用行和列且已经划分过了，自动有 浮动 和宽度的划分</span><br><span class="line">2. 不能在加 margin 值。不然会掉下来，</span><br><span class="line">3. 解决方法：列嵌套，</span><br><span class="line">4. 使用列嵌套，最好加一行包裹着，这样可以取消父元素的padding值，且高度和父级一样高</span><br><span class="line">5. Bootstrap 中 已经包含 normo清除样式的文件了，无需重复引入</span><br><span class="line"></span><br><span class="line">## 响应式开发</span><br><span class="line"></span><br><span class="line">1. 响应式开发不太关心高度，只需关心宽度即可</span><br><span class="line"></span><br><span class="line">## vscode 中的 注释</span><br><span class="line"></span><br><span class="line">1. 单行注释 ctrl + /</span><br><span class="line">2. 多行注释 shift + alt + a 可设置  ctrl + shift + /</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## null 为一个空对象</span><br><span class="line"></span><br><span class="line">1. ```js</span><br><span class="line">    var timer = null // null 是一个空对象</span><br><span class="line">    var timer; // 返回的是一个 undefined</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="谷歌浏览器自动播放"><a href="#谷歌浏览器自动播放" class="headerlink" title="谷歌浏览器自动播放"></a>谷歌浏览器自动播放</h2><ol>
<li>```html<br> <video width="" height="" src="mov.mp4" controls muted></video><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 谷歌浏览器不允许自动播放，可以使用 muted 属性：让视频静音的意思，</span><br><span class="line"></span><br><span class="line">3. 视频静音，谷歌就能自动播放了</span><br><span class="line"></span><br><span class="line">## 小技巧</span><br><span class="line"></span><br><span class="line">1. 隐藏元素 hide()</span><br><span class="line"></span><br><span class="line">2. 显示元素 show()</span><br><span class="line"></span><br><span class="line">3. 鼠标经过 mouseover</span><br><span class="line"></span><br><span class="line">4. 鼠标离开 mouseout</span><br><span class="line"></span><br><span class="line">5. jQuery 得到当前元素索引号 $（this）.index（）</span><br><span class="line"></span><br><span class="line">6.  prop 可获取元素固有属性</span><br><span class="line"></span><br><span class="line">7.  attr 可获取元素自定义属性</span><br><span class="line"></span><br><span class="line">8. toFixed(2) 保留两位小数</span><br><span class="line"></span><br><span class="line">9. 页面滚动事件：scroll</span><br><span class="line"></span><br><span class="line">   ```js</span><br><span class="line">   $(windwo).scroll(function () &#123;&#125;)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ol>
<li><p>拿到 小 li 等的索引号：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="variable language_">this</span>).<span class="title function_">index</span>()</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ol>
<li><p>```js<br>$(document) // 不带引号</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">12. ```js</span><br><span class="line">    .offset().top // top 没有小括号</span><br></pre></td></tr></table></figure>
</li>
<li><p>如果是表达式，是动态的值，不是一个固定的属性，这种情况应加一个 [ ]</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> youxi = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;狼人杀&#x27;</span>,</span><br><span class="line">  <span class="comment">// 因为 Symbol 是表达式，是动态的值，不是一个固定是属性，这种情况应该加上 []</span></span><br><span class="line">  [<span class="title class_">Symbol</span>(<span class="string">&#x27;say&#x27;</span>)]: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以发言&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  [<span class="title class_">Symbol</span>(<span class="string">&#x27;zibao&#x27;</span>)]: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;我可以自爆&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>注意：需要自定义遍历数据的时候，要想到迭代器 Symbol.Iterator</p>
</li>
<li><p>函数分割符：yield</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* <span class="title function_">gen</span>(<span class="params"></span>) &#123;</span><br><span class="line">   <span class="keyword">yield</span> <span class="number">111</span></span><br><span class="line">   <span class="keyword">yield</span> <span class="number">222</span></span><br><span class="line">   <span class="keyword">yield</span> <span class="number">333</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>方法与函数的区别</p>
<blockquote>
<ol>
<li>方法: method</li>
<li>函数: function</li>
</ol>
</blockquote>
</li>
<li><p>生命周期: 事物从诞生到消亡的整个过程.</p>
</li>
<li><p>代码规范: 缩进4个空格, 2个空格.</p>
</li>
<li><p>CLI -&gt; .editconfig 2个空格.</p>
</li>
<li><p>机器学习 -&gt; 人脑学习过程</p>
</li>
<li><p>let 和 const 区别</p>
<blockquote>
<p>（1）let（变量）</p>
<p>（2）const（常量）</p>
<p>小句子：let 是 女朋友，const 是老婆，女朋友能换，老婆不能换</p>
</blockquote>
</li>
<li><p>编程范式：</p>
<blockquote>
<p>1、命令式编程：按照计划步骤，一步步实现</p>
<p>例子：</p>
<p>（1）创建 div 元素，设置 id 属性</p>
<p>（2）定义一个变量叫 message</p>
<p>（3）将 message 变量放在前面的 div 元素中显示</p>
<p>2、声明式编程：它描述目标的性质，让计算机明白目标，而非流程，声明一个值或变量，编译器自动帮你完成</p>
<p>例子：</p>
<p>（1）vue、sql、</p>
<p>3、函数编程：第一公民就是函数，可以使用链式编程</p>
<p>4、面向对象编程：尽可能将很多东西，抽象为一个对象，这样可以有 封装、继承和多态，而多态在 js 中太灵活了</p>
<p>（1）区分函数编程和面向对象编程的方式，就是谁是第一公民</p>
<p>（2）面向对象中，第一公民就是对象</p>
<p>（3）函数编程中，第一公民就是函数</p>
</blockquote>
</li>
<li><p>this 指向问题：</p>
<blockquote>
<p>（1）箭头函数指向 当前对象</p>
<p>（2）function 指向 window</p>
<p>（3）当this所在的函数是事件处理函数时，this是当前事件源（即DOM对象）</p>
<p>（4）当this所在的函数是构造函数时，this 是 new 出来的对象（即JavaScript对象）</p>
<p>（5）当this所在的函数是类的方法时，this是方法所属的对象（即调用方法时前面写的对象）</p>
<p>（6）当this所在的函数没有明确的对象时（调用函数时，函数名前啥也没有），那么this是window对象</p>
<p>注意：</p>
<p>​        1.window 是所有对象的根对象，</p>
<p>​        2.JavaScript 代码中所有的全局变量都是 window 对象的属性，</p>
<p>​        3.所有的全局函数都是 window 对象的方法，只不过一般情况下window都是可以省略的。</p>
<p>结论：</p>
<p>​        this 在箭头函数中的指向：是一层一层往外找的，本身没有this对象，直到找到 有 this 对象的作用域，箭头函数就指向它</p>
</blockquote>
</li>
</ol>
<ol>
<li><p>语法糖：一般指的是简写形式</p>
</li>
<li><p>debug版本： 开发阶段，release版本，发布版本，tag版本，稳定的版本</p>
</li>
<li><p>Mustache 语法：胡子/胡须，（也就是双大括号）</p>
</li>
<li><p>对象中加上单引号，表示一个整体的意思，否则 vue 会自动编译为一个变量</p>
</li>
<li><p>改变url的前提下，页面不刷新，</p>
<blockquote>
<p>1、改变 hash</p>
<p>（1）location.hash=‘’</p>
<p>2、在 html5 中有 history模式：pushState({},’’,’home’)</p>
</blockquote>
</li>
</ol>
<ol>
<li><p>路由必须有映射关系才能起效果，在设置路由规则时要注意</p>
</li>
<li><p>封装：要封装彻底，所有东西都是动态的，不能让别人改你源码才能实现效果，别人只要知道怎么用就行了，传什么值能实现效果，封装才算彻底</p>
</li>
<li><p>在Vue 中防止数据丢失，一般件数据保存在 sessionStorage 临时数据里面</p>
</li>
<li><p>脱离文档流：position: absolute;，不占有页面空间，这样后面的数据才能显示出来</p>
</li>
</ol>
<h2 id="boostrap-的使用"><a href="#boostrap-的使用" class="headerlink" title="boostrap 的使用"></a>boostrap 的使用</h2><ol>
<li><p>所有的 boostrap 样式 必须写在 container 类下面，这是 boostrap 的规定</p>
</li>
<li><p>```js<br>   <div class="container"></p>
<pre><code>  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;/div&gt;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## JSON 的使用</span><br><span class="line"></span><br><span class="line">1. 需求，吧数据对象格式，转换为 字符串的格式</span><br><span class="line"></span><br><span class="line">2.  JSON.stringify()：对象转换为字符串</span><br><span class="line"></span><br><span class="line">3. 需求：将字符串格式的 数据对象，转换为数据对象格式</span><br><span class="line"></span><br><span class="line">4. JSON.parse()：字符串转换为对象</span><br><span class="line"></span><br><span class="line">5. ```js</span><br><span class="line">     var todolist = [</span><br><span class="line">           &#123;</span><br><span class="line">             title: &#x27;我今天吃了八个馒头&#x27;,</span><br><span class="line">             done: false,</span><br><span class="line">           &#125;,</span><br><span class="line">           &#123;</span><br><span class="line">             title: &#x27;我今天学习了 jq&#x27;,</span><br><span class="line">             done: false,</span><br><span class="line">           &#125;,</span><br><span class="line">         ]</span><br><span class="line"></span><br><span class="line">     localStorage.setItem(&#x27;todo&#x27;, todolist)</span><br><span class="line"></span><br><span class="line">     // 1.本地存储里面只能存储字符串的数据格式,我们吧数组对象转换为字符串格式 JSON.stringify()</span><br><span class="line">         localStorage.setItem(&#x27;todo&#x27;, JSON.stringify(todolist))</span><br><span class="line">   var data = localStorage.getItem(&#x27;todo&#x27;)</span><br><span class="line"></span><br><span class="line">      // 2.获取本地的存储数据,需要吧里面的字符串数据转换为 对象格式 JSON.parse()</span><br><span class="line">         data = JSON.parse(data)</span><br><span class="line">         console.log(data)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h2><ol>
<li>注意点1：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify（数组对象名）。</li>
<li>注意点2：获取本地存储数据，需要吧里面的字符串转换为对象格式 JSON.parse（），才能使用里面的数据</li>
</ol>
<h2 id="删除数组对象"><a href="#删除数组对象" class="headerlink" title="删除数组对象"></a>删除数组对象</h2><ol>
<li><p>splice（index,1）</p>
</li>
<li><p>```js<br>data.splice(index,1)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 从索引号为 index 的开始删除，删 1 个</span><br><span class="line"></span><br><span class="line">## 字体图标</span><br><span class="line"></span><br><span class="line">1. 字体图标必须放所有 css 样式文件的 上面，否则不起作用</span><br><span class="line"></span><br><span class="line">## 方法 与 函数区别</span><br><span class="line"></span><br><span class="line">1.  Methods(方法)</span><br><span class="line"></span><br><span class="line">   &gt; （1）和某一个对象实例有联系的</span><br><span class="line"></span><br><span class="line">2. function(函数)</span><br><span class="line"></span><br><span class="line">   &gt; 普通函数</span><br><span class="line"></span><br><span class="line">## 原型实例</span><br><span class="line"></span><br><span class="line">1. prototype：原型</span><br><span class="line"></span><br><span class="line">2. 有很多种使用方式：</span><br><span class="line"></span><br><span class="line">3. 例如：</span><br><span class="line"></span><br><span class="line">4. ```js</span><br><span class="line">   Stack.prototype.push = function()&#123;&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="警告"><a href="#警告" class="headerlink" title="警告"></a>警告</h2><ol>
<li><p>如果是引用文件报警告，可加上</p>
</li>
<li><p>```js<br>crossorigin=”anonymous” // 匿名的交叉圆点</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. 警告也不影响，加上会好看一点</span><br><span class="line"></span><br><span class="line">4. 完整例子：</span><br><span class="line"></span><br><span class="line">5. ```js</span><br><span class="line">   &lt;script crossorigin=&quot;anonymous&quot;src=&quot;https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js&quot;&gt;&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="改变函数内部-this-的指向"><a href="#改变函数内部-this-的指向" class="headerlink" title="改变函数内部 this 的指向"></a>改变函数内部 this 的指向</h2><ol>
<li><p>call() 方法</p>
</li>
<li><p>可以直接改变函数内部 this的指向，</p>
</li>
<li><p>但是 对 箭头函数无效</p>
</li>
<li><p>因为箭头函数中 this 是静态的，始终指向函数声明时所在作用域下的 this 的值</p>
</li>
<li><p>```js</p>
<pre><code>  function getName() &#123;
    console.log(this.name)
  &#125;

  let getName2 = () =&gt; &#123;
    console.log(this.name)
  &#125;

   // 设置 window 对象的 name 属性
  window.name = &#39;浩果锅&#39;
  const school = &#123;
    name: &#39;hy&#39;,
  &#125;
</code></pre><p>// call 方法调用， call 可以改变函数内部 this 值<br>getName.call(school)<br>getNam2.call(school)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 合并数组</span><br><span class="line"></span><br><span class="line">1. concat属性</span><br><span class="line"></span><br><span class="line">2. 扩展运算符</span><br><span class="line"></span><br><span class="line">3. ```js</span><br><span class="line">      const kuaizi = [&#x27;王太利&#x27;, &#x27;肖央&#x27;]</span><br><span class="line">         const fanghuang = [&#x27;曾毅&#x27;, &#x27;玲花&#x27;]</span><br><span class="line">         // const kf = kuaizi.concat(fanghuang)  太麻烦</span><br><span class="line">         const kf = [...kuaizi, ...fanghuang] // [&#x27;王太利&#x27;, &#x27;肖央&#x27;,&#x27;曾毅&#x27;, &#x27;玲花&#x27;]</span><br><span class="line">         console.log(kf)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="数据类型-1"><a href="#数据类型-1" class="headerlink" title="数据类型"></a>数据类型</h2><ol>
<li><p>一共七中数据类型</p>
</li>
<li><blockquote>
<p>1、七种数据类型 USONB</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">USONB you are so niubility</span><br><span class="line">u：undefined</span><br><span class="line">s：string Symbol</span><br><span class="line">o：object</span><br><span class="line">n：null number</span><br><span class="line">b：boolean</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="for-of-循环-和-for-in-循环"><a href="#for-of-循环-和-for-in-循环" class="headerlink" title="for of 循环 和 for in 循环"></a>for of 循环 和 for in 循环</h2><ol>
<li><p>区别</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> xiyou = [<span class="string">&#x27;唐生&#x27;</span>, <span class="string">&#x27;孙悟空&#x27;</span>, <span class="string">&#x27;猪八戒&#x27;</span>, <span class="string">&#x27;杀生&#x27;</span>]</span><br><span class="line"><span class="comment">//for of 循环保存的是键值,for in 循环保存的是健明</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> v <span class="keyword">of</span> xiyou) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(v)</span><br><span class="line">      &#125;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> v <span class="keyword">in</span> xiyou) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(v)</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="三个高阶函数："><a href="#三个高阶函数：" class="headerlink" title="三个高阶函数："></a>三个高阶函数：</h2><ol>
<li>filter、map、reduce</li>
<li>必须掌握</li>
</ol>
<h2 id="打印列表"><a href="#打印列表" class="headerlink" title="打印列表"></a>打印列表</h2><ol>
<li>关键字：console.table()</li>
<li>打印出来的就是列表</li>
</ol>
<h2 id="严格模式："><a href="#严格模式：" class="headerlink" title="严格模式："></a>严格模式：</h2><ol>
<li>关键字：’user strict’；在文档最顶部写上，就可以进入严格模式，</li>
<li>以后只要写代码，就一定不要忘记先写严格模式，</li>
<li>因为在严格模式下，能运行的代码，在普通模式下一定能运行，在普通模式下能运行的代码，在严格模式不一定能运行</li>
</ol>
<h1 id="手机端清除样式"><a href="#手机端清除样式" class="headerlink" title="手机端清除样式"></a>手机端清除样式</h1><ol>
<li><p>```css<br>/<em> 手机端清除样式 </em>/</p>
<p>/<em> 点击高亮我们需要清除，设置为 transparent 完全透明 </em>/</p>
<ul>
<li>{<br>-webkit-tap-highlight-color: transparent;<br>}</li>
</ul>
<p>/<em> 在移动端 浏览器默认的外观在 ios 上加这个属性才能给按钮和输入框自定义样式 </em>/<br>inputP {<br>  -webkit-appearance: none;<br>}</p>
<p>/<em> 禁用长按页面时的弹出菜单 </em>/<br>img,<br>a {<br>  -webkit-touch-callout: none;<br>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## display：flex</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">   display: flex;</span><br></pre></td></tr></table></figure>
</li>
<li><p>弹性布局 display: flex; 可以给 span 大小，可以在一行显示</p>
</li>
</ol>
<h1 id="EF-ASP-NET"><a href="#EF-ASP-NET" class="headerlink" title="EF+ASP.NET"></a>EF+ASP.NET</h1><h2 id="获取下拉框的值"><a href="#获取下拉框的值" class="headerlink" title="获取下拉框的值"></a>获取下拉框的值</h2><ol>
<li>```html<br> <select id="cx" name="cx"><pre><code>                    &lt;option value=&quot;0&quot;&gt;全部&lt;/option&gt;
                    @foreach (var item in ViewBag.lx)
                    &#123;
                        &lt;option value=&quot;@item.ct_id&quot;&gt;@item.ct_name&lt;/option&gt;
                    &#125;
                &lt;/select&gt;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 后台</span><br><span class="line"></span><br><span class="line">3. ```c#</span><br><span class="line">   public ActionResult Index(int cx)</span><br><span class="line">   &#123;</span><br><span class="line">        return Content(cx.ToString());</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="EF-中-使用-Contains-方法的必备条件"><a href="#EF-中-使用-Contains-方法的必备条件" class="headerlink" title="EF 中 使用 Contains 方法的必备条件"></a>EF 中 使用 Contains 方法的必备条件</h2><ol>
<li>Contains等价于SQL中的like语句</li>
<li>不过Contains只针对于字符串（string）类型的数据而言</li>
<li>如果是int等数值类型，则不会有Contains方法的存在，</li>
<li>Contains等价于like ‘%key%’ 指示指定的 String 对象是否出现在此字符串中。</li>
<li>EndsWith等价于like ‘%key’ 确定此字符串实例的结尾是否与指定的字符串匹配。</li>
<li>StartsWith等价于like ‘key%’ 确定此字符串实例的开头是否与指定的字符串匹配。</li>
</ol>
<h2 id="获取当前时间-1"><a href="#获取当前时间-1" class="headerlink" title="获取当前时间"></a>获取当前时间</h2><ol>
<li>```c#<br> DateTime p = DateTime.Today;<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 绑定下拉框</span><br><span class="line"></span><br><span class="line">1. ```c#</span><br><span class="line">     // 绑定下拉框</span><br><span class="line">           void xl()</span><br><span class="line">           &#123;</span><br><span class="line">               DropDownList1.DataSource = t.TypeTBs.ToList();</span><br><span class="line">               DropDownList1.DataTextField = &quot;TypeName&quot;;</span><br><span class="line">               DropDownList1.DataValueField = &quot;TypeId&quot;;</span><br><span class="line">               DropDownList1.DataBind();</span><br><span class="line">           &#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="获取下拉框的值-1"><a href="#获取下拉框的值-1" class="headerlink" title="获取下拉框的值"></a>获取下拉框的值</h2><ol>
<li>```c#<br>// 类型<br>h.TypeID = int.Parse(DropDownList1.SelectedValue.ToString());<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 图片上传</span><br><span class="line"></span><br><span class="line">1. ```c#</span><br><span class="line">    if (FileUpload1.HasFiles)</span><br><span class="line">               &#123;</span><br><span class="line">                   // 实例化</span><br><span class="line">                   HouseInfo h = new HouseInfo();</span><br><span class="line">                   h.HouseName = TextBox1.Text;</span><br><span class="line">                   h.HousePrice = decimal.Parse(TextBox2.Text);</span><br><span class="line">                   // 类型</span><br><span class="line">                   h.TypeID = int.Parse(DropDownList1.SelectedValue.ToString());</span><br><span class="line"></span><br><span class="line">                   // 头像</span><br><span class="line">                   FileUpload1.SaveAs(Server.MapPath(&quot;~/img/&quot; + FileUpload1.FileName));</span><br><span class="line">                   h.Pic = FileUpload1.FileName;</span><br><span class="line"></span><br><span class="line">                   // 添加 进集合</span><br><span class="line">                   db.HouseInfoes.Add(h);</span><br><span class="line">                   if (db.SaveChanges() &gt; 0)</span><br><span class="line">                   &#123;</span><br><span class="line">                       Response.Write(&quot;&lt;script&gt;alert(&#x27;添加成功&#x27;);window.location.href=&#x27;/Index.aspx&#x27;;&lt;/script&gt;&quot;);</span><br><span class="line">                   &#125;</span><br><span class="line">               &#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="添加"><a href="#添加" class="headerlink" title="添加"></a>添加</h2><ol>
<li>```c#<br> <table><pre><code>           &lt;tr&gt;
               &lt;td&gt;名称：&lt;/td&gt;
               &lt;td&gt;
                   &lt;asp:TextBox ID=&quot;TextBox1&quot; runat=&quot;server&quot;&gt;&lt;/asp:TextBox&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
            &lt;tr&gt;
               &lt;td&gt;价钱：&lt;/td&gt;
               &lt;td&gt;
                   &lt;asp:TextBox ID=&quot;TextBox2&quot; runat=&quot;server&quot;&gt;&lt;/asp:TextBox&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
            &lt;tr&gt;
               &lt;td&gt;类型：&lt;/td&gt;
               &lt;td&gt;
                   &lt;asp:DropDownList ID=&quot;DropDownList1&quot; runat=&quot;server&quot;&gt;&lt;/asp:DropDownList&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
            &lt;tr&gt;
               &lt;td&gt;图片：&lt;/td&gt;
               &lt;td&gt;
                   &lt;asp:FileUpload ID=&quot;FileUpload1&quot; runat=&quot;server&quot; /&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
            &lt;tr&gt;
               &lt;td&gt;
                   &lt;asp:Button ID=&quot;Button1&quot; runat=&quot;server&quot; Text=&quot;添加&quot; OnClick=&quot;Button1_Click&quot; /&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
       &lt;/table&gt;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># Vue</span><br><span class="line"></span><br><span class="line">## 类型转换</span><br><span class="line"></span><br><span class="line">1. parseInt（）用于计算 int 类型</span><br><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">     this.result = parseInt(this.num1) + parseInt(this.num2)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h2><ol>
<li>插值表达式可以调用方法</li>
</ol>
<h2 id="Component-和-Components-的区别"><a href="#Component-和-Components-的区别" class="headerlink" title="Component 和 Components 的区别"></a>Component 和 Components 的区别</h2><ol>
<li>Component 是全局注册 使用</li>
<li>Components 是局部注册 使用</li>
</ol>
<h2 id="函数与方法区别："><a href="#函数与方法区别：" class="headerlink" title="函数与方法区别："></a>函数与方法区别：</h2><ol>
<li><p>开发中什么时候称之为方法, 什么时候称之为函数?</p>
<blockquote>
<p>（1）方法: method</p>
<p>（2）函数: function</p>
</blockquote>
</li>
</ol>
<h2 id="el-和-template的区别"><a href="#el-和-template的区别" class="headerlink" title="el 和 template的区别"></a>el 和 template的区别</h2><ol>
<li>如果vue 实例中 同时有 el 和 template 的话，template 会将 el 给 替换掉</li>
</ol>
<h2 id="打包-vue-文件"><a href="#打包-vue-文件" class="headerlink" title="打包 vue 文件"></a>打包 vue 文件</h2><ol>
<li>打包 vue 文件时，需要用到 html-webpack-plugin 这个插件来处理 index.html</li>
</ol>
<h2 id="index-html-冲突问题"><a href="#index-html-冲突问题" class="headerlink" title="index.html 冲突问题"></a>index.html 冲突问题</h2><ol>
<li><p>在创建项目时，运行 npm run serve 后 出现 Conflict: Multiple assets emit different content to the same filename index.html报错解决方案 （也就是index.html 冲突）</p>
</li>
<li><p>解决方案：</p>
<blockquote>
<p>（1）第一：可能是文件在创建打包过程中，文件路径有中文的原因，</p>
<p>（2）第二：在脚手架进行创建项目的时候，有关多个文件名重名了，那么该如何解决？</p>
<p>注意：</p>
<p>1、文件路径必须是英文无空格无特殊符号</p>
<p>2、如果文件重名可换名字</p>
</blockquote>
</li>
</ol>
<h2 id="无法使用-JSX，除非提供了-“—jsx”-标志。"><a href="#无法使用-JSX，除非提供了-“—jsx”-标志。" class="headerlink" title="无法使用 JSX，除非提供了 “—jsx” 标志。"></a>无法使用 JSX，除非提供了 “—jsx” 标志。</h2><ol>
<li><p>无法使用 JSX，除非提供了 “—jsx” 标志。</p>
</li>
<li><p>写入完整的组件标签名即可解决报错信息。</p>
</li>
<li><p>```vue<br>&lt;<router-view /><!-- 错误 --><br><router-view>&lt;/router-view&gt; <!-- 正确 --></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 组件传值</span><br><span class="line"></span><br><span class="line">1. 父传子：用 props 属性 接收</span><br><span class="line">2. 子传父：用 this.$emit(&#x27;methodName&#x27;, )</span><br><span class="line"></span><br><span class="line">## ref 的使用</span><br><span class="line"></span><br><span class="line">1. ref：打一个标识，类似于一个id，最终会收集到this对象的 refs 里面。</span><br><span class="line"></span><br><span class="line">2. 也可快速找到传入的标签，通过 this.$refs 来找到标签，可以快速操作属性</span><br><span class="line"></span><br><span class="line">3. 例如：</span><br><span class="line"></span><br><span class="line">   &gt; ```js</span><br><span class="line">   &gt; // 找到 audio 标签 了</span><br><span class="line">   &gt;  &lt;audio ref=&quot;audio&quot; :src=&quot;`https://music.163.com/song/media/outer/url?id=$&#123;playList[playListIndex].id&#125;.mp3`&quot;&gt;&lt;/audio&gt;</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;   // 方法</span><br><span class="line">   &gt;   mounted() &#123;</span><br><span class="line">   &gt;       // 可以快速操作属性</span><br><span class="line">   &gt;     console.log(this.$refs)</span><br><span class="line">   &gt;   &#125;,</span><br></pre></td></tr></table></figure>
<p>&gt;</p>
</li>
</ol>
<h2 id="计算属性和-方法的区别："><a href="#计算属性和-方法的区别：" class="headerlink" title="计算属性和 方法的区别："></a>计算属性和 方法的区别：</h2><ol>
<li>计算属性有缓存的方式在里面，而方法没有</li>
</ol>
<h2 id="vue3-报错"><a href="#vue3-报错" class="headerlink" title="vue3 报错"></a>vue3 报错</h2><ol>
<li><p>vue3项目中App.vue中＜router-view/＞报错The template root require…. 解决无法使用JSX,除非提供了“—jsx“标准。ts(17004)错误提示</p>
</li>
<li><p>解决办法：</p>
<blockquote>
<p>1、在文件jsconfig.json（与package.json同级）中加上</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="attr">&quot;jsx&quot;</span><span class="punctuation">:</span> <span class="string">&quot;preserve&quot;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h1 id="扒网站字体图标"><a href="#扒网站字体图标" class="headerlink" title="扒网站字体图标"></a>扒网站字体图标</h1><ol>
<li>检查元素 =&gt; iconfont样式表 =&gt; 复制字体 URL到浏览器 =&gt; 回车</li>
</ol>
<h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><h2 id="鼠标移动"><a href="#鼠标移动" class="headerlink" title="鼠标移动"></a>鼠标移动</h2><ol>
<li>```css<br>/<em> 鼠标经过显示移动样式 </em>/<br>cursor: move;<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2.</span><br><span class="line"></span><br><span class="line">## 鼠标变小手</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">   /* 鼠标经过显示小手 */</span><br><span class="line">     cursor: pointer;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="背景缩放"><a href="#背景缩放" class="headerlink" title="背景缩放"></a>背景缩放</h2><p>background-size: cover;背景缩放</p>
<ol>
<li>```js<br>body {<br>  background: url(../images/bg.jpg) no-repeat;<br>  /<em> 背景缩放 </em>/<br>  background-size: cover;<br>}<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. 可简写：</span><br><span class="line"></span><br><span class="line">3. 简写形式必须加上 背景位置，默认为 0 0 和斜杠 /</span><br><span class="line"></span><br><span class="line">4. ```js</span><br><span class="line">   background: url(../images/bg.jpg) no-repeat 0 0 / cover;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="边框图片"><a href="#边框图片" class="headerlink" title="边框图片"></a>边框图片</h2><h3 id="使用场景"><a href="#使用场景" class="headerlink" title="使用场景"></a>使用场景</h3><ol>
<li>盒子大小不一，但是边框样式相同，此时就需要边框图片来完成</li>
<li>为了实现丰富多彩的边框效果，在CSS3中，</li>
<li>新增了border-image属性，这个新属性允许指定一幅图像作为元素的边框。</li>
</ol>
<h3 id="切图原理"><a href="#切图原理" class="headerlink" title="切图原理"></a>切图原理</h3><ol>
<li>把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。</li>
<li><img src= "" data-lazy-src="../../../../../../../../../%25E6%259D%2582%25E4%25B8%2583%25E6%259D%2582%25E5%2585%25AB/%25E5%2590%2584%25E7%25A7%258D%25E8%25BD%25AF%25E4%25BB%25B6/%25E7%2599%25BE%25E5%25BA%25A6%25E7%25BD%2591%25E7%259B%2598/%25E5%2590%258C%25E6%25AD%25A5/BaiduNetdiskWorkspace/%25E5%2590%258C/%25E6%259D%2582%25E4%25B8%2583%25E6%259D%2582%25E5%2585%25AB(1" alt="">/%25E5%25A4%258D%25E4%25B9%25A0/Echarts/%25E7%25AC%2594%25E8%25AE%25B0/img/%25E5%2588%2587%25E5%259B%25BE%25E4%25B9%259D%25E5%25AE%25AB%25E6%25A0%25BC.jpg)</li>
</ol>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><div class="table-container">
<table>
<thead>
<tr>
<th>1.</th>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>border-image-source</td>
<td>用在边框的图片的路径。（那个图片？）</td>
</tr>
<tr>
<td>border-image-slice</td>
<td>图片边框向内偏移。（裁剪的尺寸，一定不加单位，上右下左顺序）</td>
</tr>
<tr>
<td>border-image-width</td>
<td>图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）</td>
</tr>
<tr>
<td>border-image-repeat</td>
<td>图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸</td>
</tr>
</tbody>
</table>
</div>
<h2 id="背景透明"><a href="#背景透明" class="headerlink" title="背景透明"></a>背景透明</h2><ol>
<li><p>transparent</p>
</li>
<li><p>```css<br>border: 15px solid transparent;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 横轴对齐</span><br><span class="line"></span><br><span class="line">1. ```js</span><br><span class="line">    display: flex;</span><br><span class="line">   justify-content: space-between;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="Boostrap-的使用"><a href="#Boostrap-的使用" class="headerlink" title="Boostrap 的使用"></a>Boostrap 的使用</h2><ol>
<li><p>引入 css 文件后，一定要在 container 类名下面写内容</p>
</li>
<li><p>```js<br><div class="container"></div></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## css 中定义变量的方式</span><br><span class="line"></span><br><span class="line">1. 定义变量的方式 --</span><br><span class="line"></span><br><span class="line">   &gt; 例如：</span><br><span class="line">   &gt;</span><br><span class="line">   &gt;  --line-height: 1.5;</span><br><span class="line"></span><br><span class="line">2. 调用变量：var（变量名）</span><br><span class="line"></span><br><span class="line">   &gt; 例如：</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; font-size: var(--font-size)</span><br><span class="line"></span><br><span class="line">## 比较常用的 css 弹性布局</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">   .itemMusicTop &#123;</span><br><span class="line">     width: 100%;</span><br><span class="line">     height: 1rem;</span><br><span class="line">     /* 弹性布局 */</span><br><span class="line">     display: flex;</span><br><span class="line">     /* 水平居中 */</span><br><span class="line">     justify-content: space-between;</span><br><span class="line">     align-items: center;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="背景虚化"><a href="#背景虚化" class="headerlink" title="背景虚化"></a>背景虚化</h2><ol>
<li>```css<br> /<em> 背景虚化（新版） </em>/<pre><code>   filter: blur(30px);
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. ```css</span><br><span class="line">    /* 旧版 */</span><br><span class="line">    backdrop-filter: blur(4px);</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="脱离文档流"><a href="#脱离文档流" class="headerlink" title="脱离文档流"></a>脱离文档流</h2><ol>
<li>脱离文档流：position: absolute;，不占有页面空间，这样后面的数据才能显示出来</li>
</ol>
<h2 id="缓慢动画"><a href="#缓慢动画" class="headerlink" title="缓慢动画"></a>缓慢动画</h2><ol>
<li><p>transition: all 1.5s;</p>
</li>
<li><p>实例：</p>
<blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1deg</span>); <span class="comment">/* 旋转 -1 度 */</span></span><br><span class="line"><span class="attribute">transition</span>: all <span class="number">1.5s</span>;<span class="comment">/* 缓慢动画 1.5 秒 */</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="垂直排列"><a href="#垂直排列" class="headerlink" title="垂直排列"></a>垂直排列</h2><ol>
<li>```css<br> flex-direction: column;<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 溢出部分滚动</span><br><span class="line"></span><br><span class="line">1. ```css</span><br><span class="line">     /* 溢出部分 滚动 */</span><br><span class="line">     overflow: scroll;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="背景图片自适应大小"><a href="#背景图片自适应大小" class="headerlink" title="背景图片自适应大小"></a>背景图片自适应大小</h2><ol>
<li><p>需要用到 background-size: cover; 属性</p>
</li>
<li><p>```css<br>.login<em>box {<br>  width: 100%;<br>  height: 100%;<br>  background: url(‘@/assets/塞尔达传说 简约极简主义4k壁纸</em>彼岸图网.jpg’);<br>  background-size: cover;<br>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## 外边距重叠的问题</span><br><span class="line"></span><br><span class="line">1. 给子盒子设置外边距，导致父盒子外边距一样发生了偏移，这就是外边距重叠的问题</span><br><span class="line">2. 给父盒子设置内边距就可以解决了</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## calc（）函数</span><br><span class="line"></span><br><span class="line">1. calc() 此 css 函数允许在声明 CSS 属性值时进行一些计算，适用于以下场合，&lt;length&gt;、&lt;frequency&gt;、等等等</span><br><span class="line"></span><br><span class="line">2. 注意运算符两边要有空格隔开</span><br><span class="line"></span><br><span class="line">3. 例子：</span><br><span class="line"></span><br><span class="line">   1. ```css</span><br><span class="line">      width: calc(100% - 80px);</span><br></pre></td></tr></table></figure>
</li>
<li><p>vh：是一个相对长度值，相对于视窗的高度</p>
</li>
<li><p>如：100vh 相当于 当前浏览器视窗的高度</p>
</li>
<li><p>例子：后台管理系统中，侧边栏的高度，需要减去头部高度，就可以使用 计算函数 calc() 配合 vh 来计算</p>
</li>
<li><p>```css<br>/<em> 侧栏 </em>/<br>.el-aside {<br>  .el-menu {</p>
<pre><code>height: calc(100vh - 80px);
</code></pre><p>  }<br>}</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## box-sizing</span><br><span class="line"></span><br><span class="line">1. CSS中的 `box-sizing` 属性定义了 `user-agent` 应该如何计算一个元素的`总宽度`和`总高度`</span><br><span class="line"></span><br><span class="line">2. `box-sizing` 属性可以被用来调整这些表现：</span><br><span class="line"></span><br><span class="line">   1. `content-box` 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区域会有 100px 宽，并且任何边框和内边距的宽度`都会被增加到最后绘制出来的元素宽度中`</span><br><span class="line">   2. `border-box` 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的，也就是说，如果你将一个元素的 width 设为 100px，那么100px会包含它的 border 和 padding，`内容区的实际宽度是 width 减去（border + padding）的值`，大多数情况下，使我们更容易设定一个元素的宽高</span><br><span class="line"></span><br><span class="line">3. 注意：`border-box `不包含` margin`</span><br><span class="line"></span><br><span class="line">4. 备注：</span><br><span class="line"></span><br><span class="line">   1. 对于一个新的 Web 站点，你可能希望首先将 box-sizing 设置为 border-box，如下</span><br><span class="line"></span><br><span class="line">      ```css</span><br><span class="line">      *&#123;</span><br><span class="line">          box-sizing:border-box;</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure>
<ol>
<li><p>这使得处理元素大小的工作变的容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱，然而，在某些情况下，您应谨慎使用这个属性。</p>
</li>
<li><p>例如：</p>
<ol>
<li>你正在编写一个将由他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会很难发现使用你的组件库</li>
</ol>
</li>
</ol>
</li>
</ol>
<h2 id="flex-direction"><a href="#flex-direction" class="headerlink" title="flex-direction"></a>flex-direction</h2><ol>
<li>CSS 中的 flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向（正方向或反方向）</li>
<li>取值：<ol>
<li><code>row</code>：flex 容器的主轴被定义为与文本方向相同，主轴起点和主轴终点与内容方向相同</li>
<li><code>row-reverse</code>：表现和 row 相同，但是置换了主轴起点和主轴终点</li>
<li><code>colum</code>： flex 容器的主轴和块轴相同，主轴起点与主轴终点和书写模式的前后点相同</li>
<li><code>column-reverse</code>：表现和<code>column</code>相同，但是置换了主轴起点和主轴终点</li>
</ol>
</li>
</ol>
<h2 id="控制字符间的留白"><a href="#控制字符间的留白" class="headerlink" title="控制字符间的留白"></a>控制字符间的留白</h2><ol>
<li>letter-spacing: 1px; 控制字符间的留白，可增加和减少</li>
</ol>
<h2 id="focus-焦点选择器"><a href="#focus-焦点选择器" class="headerlink" title="focus 焦点选择器"></a>focus 焦点选择器</h2><ol>
<li>：focus 未来选择器用于选取获得焦点的表单元素</li>
</ol>
<h2 id="链接伪类"><a href="#链接伪类" class="headerlink" title="链接伪类"></a>链接伪类</h2><ol>
<li>link 选择所有以访问过的链接</li>
<li>visited 选择所有以访问过的链接</li>
<li>hover 选择鼠标指针位于其上的链接</li>
<li>active 选择活动链接（鼠标按下未弹起的链接）</li>
</ol>
<h2 id="text-transform"><a href="#text-transform" class="headerlink" title="text-transform"></a>text-transform</h2><ol>
<li>使文本全大写或全小写，也可单独对一个单词进行操作</li>
<li>使用场景<ol>
<li>项目中有些按钮上的文字需要全部大写</li>
<li>有些状态显示需要大写</li>
</ol>
</li>
<li>属性：<ol>
<li>capitalize: 关键字强制每个单词的首字母转换为大写。其他的字符保留不变</li>
<li>uppercase: 关键字强制所有字符被转换为大写。</li>
<li>lowercase: 这个关键字强制所有字符被转换为小写。</li>
<li>none: 这个关键字阻止所有字符的大小写被转换。</li>
<li>full-width: 这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里，并允许它们按照一般的东亚文字（比如中文或日文）对齐。</li>
</ol>
</li>
</ol>
<h2 id="opacity-不透明度"><a href="#opacity-不透明度" class="headerlink" title="opacity 不透明度"></a>opacity 不透明度</h2><ol>
<li>opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。</li>
</ol>
<h1 id="适配方案"><a href="#适配方案" class="headerlink" title="适配方案"></a>适配方案</h1><ol>
<li><p>flexible.js吧屏幕分为 24 等份</p>
</li>
<li><p>PC端 的效果图是1920px</p>
</li>
<li><p>cssrem 插件的基准值是 80px = 1920 / 24</p>
</li>
<li><p>rem值自动生成</p>
</li>
<li><p>要把屏幕宽度约束在 1024 ~ 1920 之间有适配</p>
</li>
<li><p>```css<br>/<em> 媒体查询 1024 ~ 1920 之间有适配 </em>/</p>
<pre><code>  @media screen and (max-width: 1024px) &#123;
    html &#123;
      /* 1024 / 24 */
      font-size: 42.66px !important;
    &#125;
  &#125;
  @media screen and (min-width: 1920px) &#123;
    html &#123;
      /* 1920 / 24 */
      font-size: 80px !important;
    &#125;
  &#125;
</code></pre><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># npm 包管理工具</span><br><span class="line"></span><br><span class="line">1. npm 官方文档：https://www.npmjs.com/</span><br><span class="line"></span><br><span class="line">2. 首先，不能文件路径不能出现中文</span><br><span class="line"></span><br><span class="line">3. ```js</span><br><span class="line">   // 清除npm的缓存</span><br><span class="line">   npm cache clean --force</span><br><span class="line">   // 安装 vue</span><br><span class="line">    npm install -g @vue/cli</span><br><span class="line">   // 删除 vue</span><br><span class="line">   npm uninstall -g @vue/cli</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="Json-server-包-搭建REST-API"><a href="#Json-server-包-搭建REST-API" class="headerlink" title="Json server 包 搭建REST API"></a>Json server 包 搭建REST API</h2><ol>
<li><p>用来快速搭建模拟的 REST API 的工具包</p>
</li>
<li><p>在线文档：<a target="_blank" rel="noopener" href="https://github.com/typicode/json-server">https://github.com/typicode/json-server</a></p>
</li>
<li><p>安装：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g json-server</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>目标根目录下创建数据库 json 文件：db.json 创建文件：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;posts&quot;</span>: [</span><br><span class="line">    &#123; <span class="string">&quot;id&quot;</span>: <span class="number">1</span>, <span class="string">&quot;title&quot;</span>: <span class="string">&quot;json-server&quot;</span>, <span class="string">&quot;author&quot;</span>: <span class="string">&quot;typicode&quot;</span> &#125;</span><br><span class="line">  ],</span><br><span class="line">  <span class="string">&quot;comments&quot;</span>: [</span><br><span class="line">    &#123; <span class="string">&quot;id&quot;</span>: <span class="number">1</span>, <span class="string">&quot;body&quot;</span>: <span class="string">&quot;some comment&quot;</span>, <span class="string">&quot;postId&quot;</span>: <span class="number">1</span> &#125;</span><br><span class="line">  ],</span><br><span class="line">  <span class="string">&quot;profile&quot;</span>: &#123; <span class="string">&quot;name&quot;</span>: <span class="string">&quot;typicode&quot;</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>启动服务：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">json-server --watch db.<span class="property">json</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>延时响应：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">json-server --watch db.<span class="property">json</span> -d <span class="number">2000</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h2><ol>
<li><p>文档：<a target="_blank" rel="noopener" href="https://github.com/axios/axios#features">https://github.com/axios/axios#features</a></p>
</li>
<li><p>安装：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install axios</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="moment-时间戳"><a href="#moment-时间戳" class="headerlink" title="moment 时间戳"></a>moment 时间戳</h2><ol>
<li><p>具体使用查文档,从 <a target="_blank" rel="noopener" href="https://www.npmjs.com/">https://www.npmjs.com/</a> 网站上搜索自己所需要的包</p>
</li>
<li><p>```js<br>npm i moment -g // 全局安装</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">3. ```js</span><br><span class="line">   const moment = require(&#x27;moment&#x27;)</span><br><span class="line">   const dt = moment().format(&#x27;YYYY年 MM月 DD日 HH时:mm分 ss秒&#x27;)</span><br><span class="line">   console.log(dt)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="bcryptjs-加密"><a href="#bcryptjs-加密" class="headerlink" title="bcryptjs 加密"></a>bcryptjs 加密</h2><ol>
<li><p>使用 <code>bcryptjs</code> 对用户密码进行加密，优点：</p>
<blockquote>
<p>（1）加密之后的密码，无法被逆向破解</p>
<p>（2）同一明文密码多次加密，得到的加密结果各不相同，保证了安全性</p>
</blockquote>
</li>
<li><p>运行如下命令，安装指定版本的 <code>bcryptjs</code> ：</p>
<blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i bcryptjs@2.4.3</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>导入 <code>bcryptjs</code> ：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> bcrypt = <span class="built_in">require</span>(<span class="string">&#x27;bcryptjs&#x27;</span>)</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>在注册用户的处理函数中，确认用户名可用之后，调用 <code>bcrypt.hashSync(明文密码, 随机盐的长度)</code> 方法，对用户的密码进行加密处理：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对用户的密码,进行 bcrype 加密，返回值是加密之后的密码字符串</span></span><br><span class="line">userinfo.<span class="property">password</span> = bcrypt.<span class="title function_">hashSync</span>(userinfo.<span class="property">password</span>, <span class="number">10</span>)</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="mysql-数据库"><a href="#mysql-数据库" class="headerlink" title="mysql 数据库"></a>mysql 数据库</h2><ol>
<li><p>运行如下命令，安装 <code>mysql</code> 模块：</p>
<blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i mysql@2.18.1</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>创建数据库的连接对象：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 mysql 模块</span></span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">&#x27;mysql&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建数据库连接对象</span></span><br><span class="line"><span class="keyword">const</span> db = mysql.<span class="title function_">createPool</span>(&#123;</span><br><span class="line">  <span class="attr">host</span>: <span class="string">&#x27;127.0.0.1&#x27;</span>,</span><br><span class="line">  <span class="attr">user</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">  <span class="attr">password</span>: <span class="string">&#x27;admin123&#x27;</span>,</span><br><span class="line">  <span class="attr">database</span>: <span class="string">&#x27;my_db_01&#x27;</span>,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 向外共享 db 数据库连接对象</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = db</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="配置-cors-跨域"><a href="#配置-cors-跨域" class="headerlink" title="配置 cors 跨域"></a>配置 cors 跨域</h2><ol>
<li><p>运行如下的命令，安装 <code>cors</code> 中间件：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i cors@<span class="number">2.8</span><span class="number">.5</span></span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>在 <code>app.js</code> 中导入并配置 <code>cors</code> 中间件：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 cors 中间件</span></span><br><span class="line"><span class="keyword">const</span> cors = <span class="built_in">require</span>(<span class="string">&#x27;cors&#x27;</span>)</span><br><span class="line"><span class="comment">// 将 cors 注册为全局中间件</span></span><br><span class="line">app.<span class="title function_">use</span>(<span class="title function_">cors</span>())</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="配置解析表单数据的中间件"><a href="#配置解析表单数据的中间件" class="headerlink" title="配置解析表单数据的中间件"></a>配置解析表单数据的中间件</h2><ol>
<li><p>通过如下的代码，配置解析 <code>application/x-www-form-urlencoded</code> 格式的表单数据的中间件：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">app.<span class="title function_">use</span>(express.<span class="title function_">urlencoded</span>(&#123; <span class="attr">extended</span>: <span class="literal">false</span> &#125;))</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="express-创建基本服务器"><a href="#express-创建基本服务器" class="headerlink" title="express 创建基本服务器"></a>express 创建基本服务器</h2><ol>
<li><p>运行如下的命令，安装特定版本的 <code>express</code>：</p>
<blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i express@4.17.1</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>在项目根目录中新建 <code>app.js</code> 作为整个项目的入口文件，并初始化如下的代码：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 express 模块</span></span><br><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>)</span><br><span class="line"><span class="comment">// 创建 express 的服务器实例</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">express</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment">// write your code here...</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用 app.listen 方法，指定端口号并启动web服务器</span></span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3007</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;api server running at http://127.0.0.1:3007&#x27;</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="优化表单数据验证"><a href="#优化表单数据验证" class="headerlink" title="优化表单数据验证"></a>优化表单数据验证</h2><ol>
<li><p>表单验证的原则：前端验证为辅，后端验证为主，后端永远不要相信前端提交过来的任何内容</p>
</li>
<li><p>安装 <code>@hapi/joi</code> 包，为表单中携带的每个数据项，定义验证规则：</p>
<blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @hapi/joi@17.1.0</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
<li><p>安装 <code>@escook/express-joi</code> 中间件，来实现自动对表单数据进行验证的功能：</p>
<blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i @escook/express-joi</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="生成-JWT-的-Token-字符串"><a href="#生成-JWT-的-Token-字符串" class="headerlink" title="生成 JWT 的 Token 字符串"></a>生成 JWT 的 Token 字符串</h2><ol>
<li><p>运行如下的命令，安装生成 Token 字符串的包：</p>
<blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i jsonwebtoken@8.5.1</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="解析-Token-的中间件"><a href="#解析-Token-的中间件" class="headerlink" title="解析 Token 的中间件"></a>解析 Token 的中间件</h2><ol>
<li>```bash<br>npm i express-jwt<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2.</span><br><span class="line"></span><br><span class="line"># Express 跨域问题</span><br><span class="line"></span><br><span class="line">## Express 的简单使用</span><br><span class="line"></span><br><span class="line">1. ```js</span><br><span class="line">   // 使用 ajax请求</span><br><span class="line"></span><br><span class="line">   // 1.导入 express</span><br><span class="line">   const express = require(&#x27;express&#x27;)</span><br><span class="line"></span><br><span class="line">   // 2.创建应用对象</span><br><span class="line">   const app = express()</span><br><span class="line"></span><br><span class="line">   // 3.创建路由规则</span><br><span class="line">   // request 是对 请求报文的封装</span><br><span class="line">   // response 是对响应报文的封装</span><br><span class="line">   app.get(&#x27;/&#x27;, (request, response) =&gt; &#123;</span><br><span class="line">     // 设置响应</span><br><span class="line">     response.send(&#x27;hello express&#x27;)</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br><span class="line">   // 4.监听端口启动服务</span><br><span class="line">   app.listen(8000, () =&gt; &#123;</span><br><span class="line">     console.log(&#x27;服务已经启动,8000 端口监听中&#x27;)</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>// 使用 node 启动<br>   <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2.</span><br><span class="line"></span><br><span class="line">### 2.跨域问题</span><br><span class="line"></span><br><span class="line">1. ```js</span><br><span class="line">    // 设置响应头,设置允许跨域</span><br><span class="line">     response.setHeader(&#x27;Access-Control-Allow-Origin&#x27;,</span><br></pre></td></tr></table></figure></p>
<ol>
<li><p>```js<br>// 1.导入 express<br>const express = require(‘express’)</p>
<p>// 2.创建应用对象<br>const app = express()</p>
<p>// 3.设置路由<br>// request 是对 请求报文的封装<br>// response 是对响应报文的封装<br>app.get(‘/server’, (request, response) =&gt; {<br>  // 设置响应头,设置允许跨域<br>  response.setHeader(‘Access-Control-Allow-Origin’, ‘*’)<br>  // 设置响应体<br>  response.send(‘hello Ajax’)<br>})</p>
<p>// 4.简听端口，启动服务<br>app.listen(8000, () =&gt; {<br>  console.log(‘服务已经启动,8000 端口监听中’)<br>})</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># Ajax</span><br><span class="line"></span><br><span class="line">## AJAX 的基本步骤</span><br><span class="line"></span><br><span class="line">&gt; （1）创建对象 xhr 就是 ajax     const xhr = new XMLHttpRequest()</span><br><span class="line">&gt;</span><br><span class="line">&gt; （2）初始化，设置请求方法和 url  xhr.open(&#x27;Get&#x27;, &#x27;http://127.0.0.1:8000/server&#x27;)</span><br><span class="line">&gt;</span><br><span class="line">&gt; （3）发送，请求 xhr.send()</span><br><span class="line">&gt;</span><br><span class="line">&gt; （4）绑定事件：处理服务端返回的结果  onreadystatechange</span><br><span class="line"></span><br><span class="line">## onreadystatechange 事件</span><br><span class="line"></span><br><span class="line">1. onreadystatechange：当服务端状态改变的时候触发</span><br><span class="line"></span><br><span class="line">   &gt; onreadystatechange 事件有 5 种状态；</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （1）0：未初始化</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （2）1：open方法已经调用完毕</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （3）2：send 方法已经调用完毕</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （4）3：服务端返回的部分结果</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （5）4：服务端返回的所有结果</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; （6）xhr.readyState 当前请求响应的状态值,可用于判断 等于某种状态等</span><br><span class="line">   &gt;</span><br><span class="line">   &gt; ```js</span><br><span class="line">   &gt;     // 判断当前响应的状态值</span><br><span class="line">   &gt;           if (xhr.readyState == 4) &#123;</span><br><span class="line">   &gt;             // 判断，响应的状态码</span><br><span class="line">   &gt;             if (xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) &#123;</span><br><span class="line">   &gt;             &#125;</span><br><span class="line">   &gt;           &#125;</span><br></pre></td></tr></table></figure>
<p>&gt;<br>&gt;<br>&gt;<br>&gt;<br>&gt;</p>
<blockquote>
<p>代码解析：</p>
<p>（1）on when：当… 的时候</p>
<p>（2）readystate：是 xhr 对象中的属性，表示状态</p>
<p>（3）change：改变的时候触发</p>
<p>所以：onreadystatechange：当服务端状态改变的时候触发</p>
</blockquote>
</li>
<li><p>如果服务端处理成功，返回结果，响应报文</p>
<blockquote>
<p>响应报文：响应行，响应头，空行，响应体</p>
<p>1、响应行：需要 状态码，状态字符串，至于版本协议可以省略</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//（1） 状态码 200 404 403 401 500</span></span><br><span class="line"><span class="comment">// 响应状态码中，2开头的都是表示成功</span></span><br><span class="line">xhr.<span class="property">status</span></span><br><span class="line"><span class="comment">//（2）状态字符串</span></span><br><span class="line">xhr.<span class="property">statusText</span></span><br></pre></td></tr></table></figure>
<p>2、响应头：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//（1）所有响应头</span></span><br><span class="line">xhr.<span class="property">getAllResponseHeaders</span></span><br><span class="line"><span class="comment">//（2）响应头允许跨行</span></span><br><span class="line"> response.<span class="title function_">setHeader</span>(<span class="string">&#x27;Access-Control-Allow-Origin&#x27;</span>, <span class="string">&#x27;*&#x27;</span>)</span><br></pre></td></tr></table></figure>
<p>3、响应体：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//（1）</span></span><br><span class="line">xhr.<span class="property">response</span></span><br><span class="line"><span class="comment">// 设置响应体</span></span><br><span class="line">response.<span class="title function_">send</span>(<span class="string">&#x27;hello Ajax&#x27;</span>)</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h1 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h1><h2 id="将数据转换为字符串"><a href="#将数据转换为字符串" class="headerlink" title="将数据转换为字符串"></a>将数据转换为字符串</h2><ol>
<li><p>需要借助于 JSON.stringify 属性</p>
</li>
<li><p>```js<br>let data = JSON.stringify(xhr.response)<br>console.log(data)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># 终端</span><br><span class="line"></span><br><span class="line">## Buffer</span><br><span class="line"></span><br><span class="line">1. 打印时，如果出现 Buffer，则在打印内容后加 tostring()</span><br><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line">   const fs = require(&#x27;fs&#x27;)</span><br><span class="line">   // 使用 fs 模块的 readFile 属性 读取文件，（路径，参数选项，回调函数）</span><br><span class="line">   fs.readFile(&#x27;./resource/content.txt&#x27;, (err, data) =&gt; &#123;</span><br><span class="line">     // err: 错误的回调</span><br><span class="line">     // data：读取的回调</span><br><span class="line">     if (err) throw err // 如果出错，抛出错误</span><br><span class="line"></span><br><span class="line">     // 输出文件内容   Buffer,如果出现，就加 tostring</span><br><span class="line">     console.log(data.toString())</span><br><span class="line">   &#125;)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>3.</p>
<h1 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h1><ol>
<li><p>语法：</p>
<blockquote>
<p>（1）/ /：表示正则表达式</p>
<p>（2）\s：匹配所有空白字符</p>
<p>（3）\S：匹配所有非空白字符</p>
<p>（4）\：转义字符</p>
<p>（5）*：匹配所有</p>
</blockquote>
</li>
<li><p>例子：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> regStyle = <span class="regexp">/&lt;style&gt;[\s\S]*&lt;\/style&gt;/</span></span><br></pre></td></tr></table></figure>
<p>表示匹配<style>标签下所有的空白字符和非空白字符</p>
</blockquote>
</li>
<li><p>属性：</p>
<blockquote>
<p>（1）exec()：检索字符串中的正则表达式的匹配值</p>
</blockquote>
</li>
</ol>
<h1 id="Vant-组件库"><a href="#Vant-组件库" class="headerlink" title="Vant 组件库"></a>Vant 组件库</h1><ol>
<li>使用 Vant 组件库，如果样式没有出现，则需要重启项目，才能生效</li>
</ol>
<h1 id="ES6-方法"><a href="#ES6-方法" class="headerlink" title="ES6 方法"></a>ES6 方法</h1><h2 id="数组去重"><a href="#数组去重" class="headerlink" title="数组去重"></a>数组去重</h2><ol>
<li><p>new Set：关键字</p>
</li>
<li><p>使用扩展运算符，展开去重后的数组，然后添加到一个新的数组中,</p>
</li>
<li><p>得到的就是去重后的新数组</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">keyWorldList</span> = [...<span class="keyword">new</span> <span class="title class_">Set</span>(<span class="variable language_">this</span>.<span class="property">keyWorldList</span>)]</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h2 id="变量当作属性"><a href="#变量当作属性" class="headerlink" title="变量当作属性"></a>变量当作属性</h2><ol>
<li><p>如果变量当作属性的话，需要加个 中括号[ ]包裹起来</p>
</li>
<li><p>例子：</p>
<blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> level = <span class="title class_">Symbol</span>(<span class="string">&#x27;level&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> student = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;小明&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="comment">// 如果想让变量当作属性名的话，需要加一个[]包裹</span></span><br><span class="line">    [level]: <span class="number">1</span>,</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
</blockquote>
</li>
</ol>
<h1 id="TS"><a href="#TS" class="headerlink" title="TS"></a>TS</h1><h2 id="TS-定义变量报错"><a href="#TS-定义变量报错" class="headerlink" title="TS 定义变量报错"></a>TS 定义变量报错</h2><ol>
<li>找到 tsconfig.json配置文件，把isolatedModules字段改为false</li>
</ol>
<h2 id="template报错"><a href="#template报错" class="headerlink" title="template报错"></a>template报错</h2><ol>
<li>找到 jsconfig.json 文件 加入： “jsx”: “preserve”, 即可</li>
</ol>
<h1 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h1><h2 id="当前选中元素"><a href="#当前选中元素" class="headerlink" title="当前选中元素"></a>当前选中元素</h2><ol>
<li>在谷歌浏览器中打开控制台，输入console.log($0) 表示当前选中的元素</li>
<li>$0 表示当前选中的元素</li>
</ol>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">晚夜微雨问海棠</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/posts/6c53f471.html">http://example.com/posts/6c53f471.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">晚夜微雨问海棠のBlog</a>！</span></div></div><div class="tag_share"><div class="post_share"><div class="social-share" data-image="https://img1.baidu.com/it/u=2163263263,2058666557&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=497" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/927e84a1.html" title="Markdown使用小技巧"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/12/06/z65aXq.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-12-06</div><div class="title">Markdown使用小技巧</div></div></a></div><div><a href="/posts/8b6c3947.html" title="VS插件"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/03/11/ppKS8V1.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-03-04</div><div class="title">VS插件</div></div></a></div><div><a href="/posts/bb2c23b2.html" title="Win11使用技巧"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/03/11/ppKp4SO.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-03-08</div><div class="title">Win11使用技巧</div></div></a></div><div><a href="/posts/a9613e02.html" title="VSCode配置"><img class="cover" src= "" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fe7fcf8b0b298ddb26f73d69389f0b606.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665288100&t=6924eef2523e798f2f451b4237c40a02" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-12</div><div class="title">VSCode配置</div></div></a></div><div><a href="/posts/7ee65b9f.html" title="前端+后端知识汇总（1）"><img class="cover" src= "" data-lazy-src="https://img1.baidu.com/it/u=2163263263,2058666557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=497" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-12</div><div class="title">前端+后端知识汇总（1）</div></div></a></div><div><a href="/posts/3df4b4e4.html" title="好用的软件"><img class="cover" src= "" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.11467.com%2F2020%2F04-23%2F1160456217.jpg&refer=http%3A%2F%2Fimg.11467.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665287815&t=3b6f36234b71a75c02ce9d146bd29909" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-12</div><div class="title">好用的软件</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Html"><span class="toc-number">1.</span> <span class="toc-text">Html</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#input%E4%B8%AD%E7%9A%84-data-%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E9%BB%98%E8%AE%A4%E6%97%B6%E9%97%B4"><span class="toc-number">1.1.</span> <span class="toc-text">input中的 data 获取当前默认时间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BD%AE%E6%92%AD%E5%9B%BE"><span class="toc-number">1.2.</span> <span class="toc-text">轮播图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E8%B6%85%E5%87%BA%E7%94%A8%E7%9C%81%E7%95%A5%E5%8F%B7%E6%98%BE%E7%A4%BA"><span class="toc-number">1.3.</span> <span class="toc-text">文字超出用省略号显示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E5%8F%98%E5%B0%8F%E6%89%8B"><span class="toc-number">1.4.</span> <span class="toc-text">鼠标变小手</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-%E4%B9%A6%E5%86%99%E4%B8%89%E8%A7%92"><span class="toc-number">1.5.</span> <span class="toc-text">CSS 书写三角</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6%E9%97%AE%E9%A2%98"><span class="toc-number">1.6.</span> <span class="toc-text">外边距合并问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flex-%E5%B8%83%E5%B1%80%E8%AE%BE%E7%BD%AE%E4%BE%A7%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F%EF%BC%8C%E5%A4%9A%E8%A1%8C"><span class="toc-number">1.7.</span> <span class="toc-text">flex 布局设置侧轴对齐方式，多行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%86%E5%8F%A3%E5%AE%BD%E5%BA%A6"><span class="toc-number">1.8.</span> <span class="toc-text">视口宽度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B8%B8%E7%94%A8-body-%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.9.</span> <span class="toc-text">移动端常用 body 样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%96%E6%B6%88%E7%82%B9%E5%87%BB%E6%96%87%E6%9C%AC%E6%A1%86%E6%97%B6%E5%87%BA%E7%8E%B0%E7%9A%84%E8%BE%B9%E6%A1%86"><span class="toc-number">1.10.</span> <span class="toc-text">取消点击文本框时出现的边框</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#text-index-focus"><span class="toc-number">2.</span> <span class="toc-text">text_index:focus{</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E4%B8%8D%E8%83%BD%E8%BE%93%E5%85%A5"><span class="toc-number">2.1.</span> <span class="toc-text">使不能输入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9B%E5%BA%A6%E6%9D%A1"><span class="toc-number">2.2.</span> <span class="toc-text">进度条</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E6%97%B6%E9%97%B4"><span class="toc-number">2.3.</span> <span class="toc-text">获取当前时间</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E7%BB%8F%E8%BF%87%E9%83%A8%E5%88%86%E8%BE%B9%E6%A1%86%E6%B2%A1%E6%98%BE%E7%A4%BA"><span class="toc-number">2.3.0.1.</span> <span class="toc-text">鼠标经过部分边框没显示</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E5%85%83%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">2.4.</span> <span class="toc-text">三元表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%97%B6%E9%97%B4"><span class="toc-number">2.5.</span> <span class="toc-text">格式化时间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%80%BC%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">2.6.</span> <span class="toc-text">获取值的两种方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E5%A4%A7%E5%9B%BE%E6%A1%88%E4%BE%8B"><span class="toc-number">2.7.</span> <span class="toc-text">查看大图案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#navigator-%E5%AF%B9%E8%B1%A1"><span class="toc-number">2.8.</span> <span class="toc-text">navigator 对象</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer" style="background-image: url('https://img1.baidu.com/it/u=2163263263,2058666557&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=497')"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2023 By 晚夜微雨问海棠</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div><div class="rightMenu-item" id="menu-home"><i class="fa-solid fa-house"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" href="/archives/"><i class="fa-solid fa-archive"></i><span>文章归档</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="fa-solid fa-folder-open"></i><span>文章分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="fa-solid fa-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuNormal"><div class="rightMenu-item" id="menu-translate"><i class="fa-solid fa-earth-asia"></i><span>繁简切换</span></div><div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span>切换模式</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>(() => {
  const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaidWrap.length) {
    window.runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

      Array.from($mermaidWrap).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
        const mermaidID = 'mermaid-' + index
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
          mermaidSrc.insertAdjacentHTML('afterend', svgCode)
        })
      })
    }

    const loadMermaid = () => {
      window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
    }

    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  }
})()</script><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: '',
      appKey: '',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><div class="aplayer no-destroy" data-id="7625372994" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div> <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script> <script src="/swiper/swiper.min.js"></script> <script src="/swiper/swiperindex.js"></script> <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <script src="/js/title.js"></script> <script defer data-pjax src="/js/cat.js"></script> <script defer data-pjax src="/js/rightMenu.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function history_calendar_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>';
                console.log('已挂载history_calendar')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='/'|| '/' ==='all')){

            history_calendar_injector_config()
        } </script><script data-pjax  src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script><script data-pjax src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><script data-pjax>
    function butterfly_categories_card_injector_config(){
      var parent_div_git = document.getElementById('recent-posts');
      var item_html = '<style>li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: 190px;overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: 160px;}}</style><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew6.photophoto.cn%2F20120106%2Fhaimianbaobaotupian-10036689_1.jpg&amp;refer=http%3A%2F%2Fpicnew6.photophoto.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648815&amp;t=a3deb15ddd7a38597964c3a05e519bd7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Asp-Net/&quot;);" href="javascript:void(0);">Asp.Net</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/site-backgound.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C-系列/&quot;);" href="javascript:void(0);">C#系列</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13012860773%2F1000.jpg&amp;refer=http%3A%2F%2Finews.gtimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648865&amp;t=1d2f13b52a7e279e8801545f59eda4e7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Hexo重装记录/&quot;);" href="javascript:void(0);">Hexo重装记录</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202011%2F07%2F20201107183300_ac0c5.thumb.1000_0.jpeg&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648887&amp;t=3d32c6b12a4cf12e5cec3585b79c1fc3);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/EF/&quot;);" href="javascript:void(0);">EF</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F25%2Feb%2F1f%2F25eb1fd40b5a740c2b79e33f700806e5.jpg&amp;refer=http%3A%2F%2Fup.enterdesk.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648908&amp;t=6425ee3bd166b0f5c5ffa6fb18b6937b);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/LOL/&quot;);" href="javascript:void(0);">LOL</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx26%2F36080017392073.jpg&amp;refer=http%3A%2F%2Flmg.jj20.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650136&amp;t=5cc414d0ee58c9e285218d92f6a95513);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/idea/&quot;);" href="javascript:void(0);">idea</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn10%2F320%2Fw700h420%2F20180907%2F5116-hitesuz6599636.jpg&amp;refer=http%3A%2F%2Fn.sinaimg.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650004&amp;t=6a304aa9cc7435ec1d148b8f99092bc0);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界/&quot;);" href="javascript:void(0);">世界</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxCi6.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界见闻录/&quot;);" href="javascript:void(0);">世界见闻录</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxFzD.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端体系/&quot;);" href="javascript:void(0);">前端体系</a><span class="categoryBar-list-count">19</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxnot.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/副业/&quot;);" href="javascript:void(0);">副业</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxMJf.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/文案/&quot;);" href="javascript:void(0);">文案</a><span class="categoryBar-list-count">6</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxQW8.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/办公日常/&quot;);" href="javascript:void(0);">办公日常</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAx3Qg.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/朝花夕拾/&quot;);" href="javascript:void(0);">朝花夕拾</a><span class="categoryBar-list-count">12</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxYes.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端/&quot;);" href="javascript:void(0);">前端</a><span class="categoryBar-list-count">20</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/杂七杂八/&quot;);" href="javascript:void(0);">杂七杂八</a><span class="categoryBar-list-count">7</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/简书/&quot;);" href="javascript:void(0);">简书</a><span class="categoryBar-list-count">5</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/游戏/&quot;);" href="javascript:void(0);">游戏</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li></ul></div></div>';
      console.log('已挂载butterfly_categories_card')
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      }
    if( document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    butterfly_categories_card_injector_config()
    }
  </script><script data-pjax>
  function butterfly_clock_anzhiyu_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "" data-lazy-src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock_anzhiyu')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var qweather_key = '41ea442da35546559913a6a5d54163b2';
  var gaud_map_key = '6b62fbebf584b9a22a85bfccbf90335e';
  var baidu_ak_key = 'undefined';
  var flag = 0;
  var clock_rectangle = '114.35,34.79';
  var clock_default_rectangle_enable = 'true';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_anzhiyu_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_anzhiyu_injector_config();
  }
  </script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js"></script><script data-pjax>
  function butterfly_footer_beautify_injector_config(){
    var parent_div_git = document.getElementById('footer-wrap');
    var item_html = '<div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架为Hexo_v5.4.0" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&amp;logo=hexo" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" data-title="主题版本Butterfly_v4.2.2" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&amp;logo=bitdefender" alt=""/></a><a class="github-badge" target="_blank" href="https://www.jsdelivr.com/" style="margin-inline:5px" data-title="本站使用JsDelivr为静态资源提供CDN加速" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&amp;logo=jsDelivr" alt=""/></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris" alt=""/></a></p>';
    console.log('已挂载butterfly_footer_beautify')
    parent_div_git.insertAdjacentHTML("beforeend",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_footer_beautify_injector_config();
  }
  else if (epage === cpage){
    butterfly_footer_beautify_injector_config();
  }
  </script><script async src="/js/runtime/runtime.min.js"></script><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item swiper_container_card" style="height: auto;width: 100%"><div id="random"><div id="random-banner"><canvas id="peoplecanvas"></canvas></div><a id="random-hover" style="width:100%;height:auto;" href="javascript:toRandomPost()" rel="external nofollow noreferrer" one-link-mark="yes"><i class="fa fa-paper-plane" style="margin-left:10px"></i><div style="margin-left:10px">随便逛逛<i class="fa-solid fa-arrow-right" style="margin-left:10px"></i></div></a></div><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://img2.baidu.com/it/u=4087346614,241521689&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=333" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-19</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">学生人到职业人_心态篇</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/04/xLiBTA.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-04</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">生活の奇思妙想☞2022</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/21/xcAQDH.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-12</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">少年自负凌云笔</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJbF0.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">租房有感</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJLWT.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-25</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">谷歌收藏</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJJd1.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">阳光不燥、微风正好</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script><script defer data-pjax src="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper_init.js"></script><script data-pjax src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/people.min.js"></script><script async src="/anzhiyu/random.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('article-sort-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__slideInRight');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js"></script><script async src="/js/ali_font.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/"});</script></body></html>